2010 年,CSS3 规范推出。
属性选择器:
A[B]
:选择有属性 B 的 A 元素。img[alt] // 选择有 alt 属性的 img 标签
A[B=C]
:精准匹配,选择属性 B 等于 C 的 A 元素。img[alt="故宫"] // 选择 alt 属性是 "故宫" 的 img 标签
A[B^=”C”]
:开头匹配,选择属性 B 以 C 开头的 A 元素。img[alt^="故宫"] // 选择 alt 属性以 "故宫" 开头的 img 标签
A[B$=”C”]
:结尾匹配,选择属性 B 以 C 结尾的 A 元素。img[alt$="故宫"] // 选择 alt 属性以 "故宫" 结尾的 img 标签
A[B*=”C”]
:任意位置匹配,选择属性 B 中包含 C 的 A 元素。img[alt*="故宫"] // 选择 alt 属性中包含有 "故宫" 的 img 标签
A[B~=”C”]
:选择属性 B 中有以空格隔开的独立部分的 C 的 A 元素。img[alt~="故宫"] // 选择 alt 属性中有空格隔开的 "故宫" 的 img 标签 <img src="images/gugong.png" alt="北京著名景点 故宫"> // 会被选中 <img src="images/gugong.png" alt="北京著名景点故宫"> // 不会被选中
A[B|=”C”]
:选择属性 B 中有 C 加横杠C-
开头的 A 元素。img[alt|="故宫"] // 选择 alt 属性以 "故宫-" 开头的 img 标签 <img src="images/gugong.png" alt="故宫-北京著名景点"> // 会被选中 <img src="images/gugong.png" alt="故宫北京著名景点"> // 不会被选中
元素关系选择器:
A~B
:通用兄弟元素选择器。匹配所有位于 A 元素后面的同层级的 B 元素。A+B
:相邻兄弟选择器。匹配紧跟在 A 元素后面的同层级的 B 元素。A>B
:子元素选择器。匹配作为 A 元素直接子元素的 B 元素。A B
:后代选择器。匹配作为 A 元素所有后代子元素的 B 元素。
结构伪类选择器:
-
:root
:匹配根元素,即<html>
标签。 -
A:nth-child(n)
:匹配 A 的父元素中的第 n 个元素,且这个元素为 A。n 从 1 开始计算。
A:nth-last-child(n)
:匹配 A 的父元素中的倒数第 n 个元素, 且这个元素为 A。n 从 1 开始。
A:first-child
:匹配 A 的父元素中的第一个元素,且这个元素为 A。
A:last-child
:匹配 A 的父元素中的最后一个元素,且这个元素为 A。
A:only-child
:匹配 A 的父元素中只有一个的子元素,且这个元素为 A。<style> h3:nth-child(1) { color: red; } h3:nth-child(2) { color: green; } </style> <div> <h3>我是第一个子元素</h3> // 此段文本变为红色 <p>我是第二个子元素</p> // 此段文本不变颜色 <span>我是第三个子元素</span> </div>
nth-child(n)
与nth-of-type(n)
中的 n 可以是数字(从 1 开始)、关键词(odd 奇数、even 偶数)或算术表达式(an+b
:表示从 b 开始每 a 个选一个;-n+a
:表示选择第 a 个之前的元素;n+a
:表示选择第 a 个之后的元素)。<style> // 选择下标是 3 的倍数加上 1 的元素,即 1、4、7... h3:nth-child(3n+1) { color: red; } </style> <div> <h3>我是第一个子元素</h3> // 此段文本变为红色 <h3>我是第二个子元素</h3> <h3>我是第三个子元素</h3> <h3>我是第四个子元素</h3> // 此段文本变为红色 <h3>我是第五个子元素</h3> <h3>我是第六个子元素</h3> <h3>我是第七个子元素</h3> // 此段文本变为红色 </div>
-
A:nth-of-type(n)
:匹配 A 的父元素中的第 n 个 A 元素(匹配 A 的父元素中的同种 A 标签中的第 n 个 A)。n 从 1 开始计算。
A:nth--last-of-type(n)
:匹配 A 的父元素中的倒数第 n 个 A 元素。n 从 1 开始计算。
A:first-of-type
:匹配 A 的父元素中的第一个 A 元素。
A:last-of-type
:匹配 A 的父元素的最后一个 A 元素。
A:only-of-type
:匹配 A 的父元素中只有一个的 A 元素,可以包含其他元素,但是只能有一个 A 元素。<style> // 匹配同层级 h3 类型中的第一个 h3 h3:nth-of-type(1) { color: red; } // 匹配同层级 h3 类型中的第二个 h3 h3:nth-of-type(2) { color: green; } </style> <div> <h3>我是第一个子元素</h3> // 此段文本变为红色 <p>我是第二个子元素</p> <span>我是第三个子元素</span> <h3>我是第四个子元素</h3> // 此段文本变为绿色 </div>
-
A:empty
:匹配空标签。 -
A:not(B)
:否定伪类选择器。匹配所有过滤掉 B 的 A 元素。p:not(.myp){ color:red;//匹配所有过滤掉class=”myp”的p元素 }
-
A:target
:目标伪类选择器。用于当前活动的被链接的元素的样式。:target{ color:red;//点击a链接之后,p元素将会显示指定样式 } <a href=”#myp”>跳转到p1</a> <p id=”myp”>hello world</p>
UI 伪类选择器:
指定的样式只有在元素处于某种状态下才起作用,在默认状态下不起作用。
:enabled
:匹配可用的元素。
:disabled
:匹配设置了 disabled 属性的元素。input:enabled{ background:red; }
:read-write
:匹配可读及可写的元素。
:read-only
:匹配设置了 readonly 属性的元素。:out-of-range
:用于标签的值在指定区间之外时显示的样式。
:in-range
:用于标签的值在指定区间之间时显示的样式。<input type="number" min="5" max="10" value="17" /> input:out-of-range { border: 2px solid red; }
:optional
:匹配可填可不填的输入元素。
:required
:匹配设置了 required 属性的元素。:valid
:匹配输入值合法的元素。
:invalid
:匹配输入值非法的元素。:focus
:匹配获得焦点的元素。:checked
:匹配设置了checked 属性的元素。
伪元素选择器:
伪元素表示虚拟动态创建的元素,采用双冒号写法。
-
::before
:创建一个伪元素,并将其作为匹配选中的元素的第一个子元素。必须设置 content 属性表示其中的内容,至少是空。
::after
:创建一个伪元素,并将其作为匹配选中的元素的最后一个子元素。必须设置 content 属性表示其中的内容,至少是空。这些添加的内容不会出现在 DOM 中,不会改变文档内容,不可复制,仅仅是在 css 渲染层加入。所以不要用
::before
或::after
展示有实际意义的内容,尽量使用它们显示修饰性内容。content 可取以下值:
- string:使用引号包一段字符串,将会向元素内容中添加字符串。
p::before{ content: "《"; color: blue; } p::after{ content: "》"; color: blue; } <p>平凡的世界</p> ```
- attr():通过 attr() 调用当前元素的属性。
a::after{ content: "(" attr(href) ")"; } <a href="http://www.cnblogs.com/starof">starof</a>
- url()/uri() 用于引用媒体文件。
a::before{ content: url("https://www.baidu.com/img/baidu_jgylogo3.gif"); } <body><a>百度</a></body>
- string:使用引号包一段字符串,将会向元素内容中添加字符串。
-
::selection
:匹配被用户选取高亮的部分。::selection{ color:#ff0000; }
-
::first-line
:匹配元素的第一行,只能是块级元素。
::first-letter
:匹配元素的第一个字,只能是块级元素。