CSS3学习笔记

百科大全

更新时间：2025-10-05 09:54:1136

admin管理员组
文章数量:1794759

CSS3学习笔记

文章目录

一、全局选择器
二、标签选择器
三、结构选择器
- 3.1 后代选择器(华夏子孙向下无限选择)
- 3.2 > 儿子选择器只往下选择一层
- 3.3 ~ 兄弟选择器
- 3.4 + 铁兄弟(紧挨着的)
四、[] 属性选择器
- 4.1 ^ 以什么开始 $以什么结束
- 4.3 ~ 属性里边有这个值
- 4.4 * 属性里边有这个字符串
- 4.5 | 以什么开始可以跟-符号也可以选中
五、伪类选择器
- 5.1 常见伪类列表
- 5.2 :target 选择器可用于选取当前活动的目标元素
- 5.3 :empty 隐藏空的元素
六、结构伪类选择器
- 6.1 :firsrt-child 选择器匹配其父元素中的第一个子元素。
- 6.2 :first-of-type 匹配其父元素下特定类型的第一个子元素。
- 6.3 :last-child :last-of-child 用法类似
- 6.4 :only-child 选择唯一的子元素
- 6.5 :only-of-type 代表了任意一个元素，这个元素没有其他相同类型的兄弟元素
七、根据元素编号灵活选择
7.1 :nth-child() 根据元素编号灵活选择
- 7.2 :nth-child(n) 选择父元素下的所有元素
- 7.3 :nth-child(2n) 偶数行变色
- 7.4 :nth-child(2n-1) 基数行变色
- 7.5 :nth-child(-n+4) 选取指定的前几个
- 7.6 :nth:child(n+4) 从第几个开始
- 7.7 h1:nth-of-type() 找出父元素下指定类型的第几个元素
- 7.8 :nth-last-child() 从后面开始取
- 7.9 :nth-last-of-type() 按指定类型，从后开始取
- 7.10 排除掉某些个 (支持无限套娃S)
八、文本伪类操作
- 8.1 ::first-letter 首个文字
- 8.2 ::first-line 首行

有关CSS的优先级可以取看我的上一篇文章，两分钟掌握CSS优先级及引入方式！

一、全局选择器

*全局选择器：

效果：

二、标签选择器

多个标签名用逗号分隔，表示并列的关系。

效果：

三、结构选择器 3.1 后代选择器(华夏子孙向下无限选择) <style> marn article h2 { color: red; } </style> <body> <main> <article> <h1>Are</h1> <aside> <h2>content</h2> </aside> <h2>AreAre</h2> </article> </main> </body>

效果:

3.2 > 儿子选择器只往下选择一层 <style> main article>h2 { color: red; } </style> <body> <main> <article> <h1>Are</h1> <aside> <h2>content</h2> </aside> <h2>AreAre</h2> </article> </main> </body>

效果:

3.3 ~ 兄弟选择器

这里需要注意只选择当前元素后边的。

效果:

3.4 + 铁兄弟(紧挨着的)

注意：这里只选择后边的第一个

效果：

四、[] 属性选择器

如果有多个属性，也就是多个[][]那么表达的意思是：且的关系

效果：我们还可以扩展开来写，例如：

解读：选择input标签type属性等于text且有class属性的标签。效果：

4.1 ^ 以什么开始 $以什么结束

^ 符号规定属性以什么开头 & 符号规定属性以什么结尾

效果：

4.3 ~ 属性里边有这个值 <style> input[class~='Con']{ color: red; } </style> <body> <main> <article> <input type="text" value="Are" class="text Con"> <input type="text" value="Are" class="textContent Content"> <aside> <h2>content</h2> </aside> <input type="button" value="提交"> </article> </main> </body>

效果：

4.4 * 属性里边有这个字符串 <style> input[class*='Con']{ color: red; } </style> <body> <main> <article> <input type="text" value="Are" class="text"> <input type="text" value="Are" class="textContent"> <aside> <h2>content</h2> </aside> <input type="button" value="提交"> </article> </main> </body>

该选择器表达的意思是： input标签的class里边只要出现了Con这个字符串，就把文字设置为红色效果：

4.5 | 以什么开始可以跟-符号也可以选中 <style> input[class|='Con']{ color: red; } </style> <body> <main> <article> <input type="text" value="Are" class="Con"> <input type="text" value="Are2" class="Con-tent"> <input type="text" value="Are3" class="Con.tent"> <input type="text" value="Are4" class="Content"> <aside> <h2>content</h2> </aside> <input type="button" value="提交"> </article> </main> </body>

效果：

五、伪类选择器 5.1 常见伪类列表

a:link 超链接默认样式

a:hover 鼠标经过超链接

a:active 鼠标点击

a:visited 点击过后

input:focus 获得焦点

:target 选择器可用于选取当前活动的目标元素实例：W3School :target 选择器

:root 选择器用匹配文档的根元素。注：在HTML中根元素始终是HTML元素。

:empty选择器选择每个没有任何子级或文本节点的元素。实例：菜鸟教程 :empty 选择器

<body> <a href="www.baidu">百度</a> </body> <style> /* 默认样式 */ a:link{ color: red; } /* 鼠标经过 */ a:hover{ color: teal; } /* 点击发生的时候 */ a:active{ color: black; } /* 点击之后的 */ a:visited{ color: yellow; } /* 获取焦点 */ input:focus{ background-color: red; } /* 鼠标经过 */ input:hover{ background-color: teal; } /* 点击发生的时候 */ input:active{ background-color: black; } </style> 5.2 :target 选择器可用于选取当前活动的目标元素

实例：菜鸟教程 :target

URL 带有后面跟有锚名称 #，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。 :target 选择器可用于选取当前活动的目标元素。

效果：锚点链接实例

5.3 :empty 隐藏空的元素

:empty选择器选择每个没有任何子级的元素（包括文本节点）。

<body> <li>列表1</li> <li></li> <li>列表3</li> </body> <style> /*所有为空的子元素设置为隐藏 :empty { display: none; }*/ /*对li标签为空的元素*/ li:empty{ display:none; } </style>

效果：

六、结构伪类选择器 6.1 :firsrt-child 选择器匹配其父元素中的第一个子元素。 <style> article >:first-child{ color: red; } article :first-child{ background-color: teal; } article h1:first-child{ border: 4px solid black ; } </style> <body> <main> <article> <h1>Are</h1> <h1>Are</h1> <aside> <h1>aside_h1</h1> <h2>content</h2> </aside> <div> <a href="">超链接</a> </div> <h2>AreAre</h2> </article> </main> </body>

效果：

6.2 :first-of-type 匹配其父元素下特定类型的第一个子元素。 <style> article h1:first-of-type{ background-color: teal; } </style> <body> <main> <article> <h1>Are</h1> <h1>Are</h1> <aside> <h2>content</h2> </aside> <h2>AreAre</h2> </article> </main> </body>

效果：

6.3 :last-child :last-of-child 用法类似 6.4 :only-child 选择唯一的子元素 <style> article :only-child{ color: red; } </style> <body> <main> <article> <h1>1</h1> <p>2</p> <aside> <h1>3</h1> </aside> <div> <p>4</p> <p>5</p> </div> </article> </main> </body>

解读：选择article里边有子元素并且只有一个子元素的标签。

效果：

6.5 :only-of-type 代表了任意一个元素，这个元素没有其他相同类型的兄弟元素

指定属于父元素的特定类型的唯一子元素

七、根据元素编号灵活选择 7.1 :nth-child() 根据元素编号灵活选择 <style> article :nth-child(1){ color: red; } article>:nth-child(1){ background-color: teal; } </style> </head> <body> <main> <article> <h1>1</h1> <p>2</p> <aside> <h1>3</h1> </aside> <div> <p>4</p> <p>5</p> </div> </article> </main> </body>

效果：

7.2 :nth-child(n) 选择父元素下的所有元素

这里的n代表的是从0到无穷大此外：even也代表的是偶数行

效果：

7.3 :nth-child(2n) 偶数行变色 <style> ul :nth-child(2n){ background-color: teal; } </style> <body> <main> <article> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> </article> </main> </body>

7.4 :nth-child(2n-1) 基数行变色

此外：odd也代表的是基数行

7.5 :nth-child(-n+4) 选取指定的前几个

解读：这里+的是几，就是选择前几个

效果：

7.6 :nth:child(n+4) 从第几个开始

要从第几个开始取，这里的是就改成几

效果：

7.7 h1:nth-of-type() 找出父元素下指定类型的第几个元素 <style> article h1:nth-of-type(2){ color: red; } </style> <body> <article> <h1>Are</h1> <aside> <h2>content</h2> </aside> <h1>new</h1> </article> </body>

效果:

7.8 :nth-last-child() 从后面开始取

实例：取后两个

效果：

7.9 :nth-last-of-type() 按指定类型，从后开始取 7.10 排除掉某些个 (支持无限套娃S) <style> ul li:nth-of-type(-n+4):not(:nth-of-type(2)){ background-color: teal; } </style> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> </body>

效果：

八、文本伪类操作 8.1 ::first-letter 首个文字 8.2 ::first-line 首行 p::first-letter{ color: red; } p::first-line{ color: teal; }

效果：

本文标签：学习笔记

版权声明：本文标题：CSS3学习笔记内容由林淑君副主任自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686968855a123611.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。