CSS选择器详解（转）

CSS选择器详解（转）元素选择器
通配选择器
* { sRules }
选定⽂档所有的元素
/** 设置所有元素为红⾊ **/
* {
color: red;
}
<div>我是div</div>
<p>我是p</p>
类型选择器
E { sRules }
选定指定的⽂档元素 E
/** 设置元素p为红⾊ **/
p {
color: red;
}
<p>我是p</p>
类选择器
E.myclass { sRules }
选定 class 属性包含 myclass 的⽂档元素 E
/** 设置 calss="myclass" 的元素为红⾊ **/
.myClass {
color: red
}
<div class="myclass">我是div</div>
多类选择器
E.myclass.myotherclass { sRules }
选定 class 属性包含 myclass 以及 myotherclass 的⽂档元素 E
/** 设置 calss="myclass myotherclass" 的元素为红⾊ **/
.myClass.myotherclass {
color: red
}
<div class="myclass myotherclass">我是div</div>
ID选择器
E#myid { sRules }
选定 id 属性值为 myid 的⽂档元素 E
/** 设置 id="myid" 的元素为红⾊ **/
#myid {
color: red;
}
<div id="myid">我是div</div>
属性选择器
E[attr] { sRules }
选定具有属性 attr 的⽂档元素 E
/** 设置有属性 id 的元素为红⾊ **/
div[id] {
color: red;
}
<div id="myid">我是div</div>
根据具体属性值选择
E[attr="val"] { sRules }
选定具有属性 attr 且属性值等于 val 的⽂档元素 E
/** 设置有属性 id 且值等于 "myid" 的元素为红⾊ **/
div[id="myid"] {
color: red;
}
/** 多个属性-值 **/
input[type="text"][class="text1"] {
width: 20px;
}
<div id="myid">我是div</div>
<input type="text" class="text1" />
根据部分属性值选择
E[attr~="val"] { sRules }
选定具有属性 attr 且属性值为⽤空格分隔的字词列表，其中有⼀个等于 val （包含只有⼀个值且该值等于 val 的情况）的⽂档元素 E /** 设置 class 属性有⼀个值为 div1 的元素为红⾊ **/
div[class~="div1"] {
color: red;
}
<div calss="div1">我是div</div>
<div class="div1 header">我是div</div>
E[attr^="val"] { sRules }
选定具有属性 attr 且属性值以 val 开头的字符串的⽂档元素 E
/** 设置 class 属性的值以 head 开头的元素为红⾊ **/
div[class^="head"] {
color: red;
}
<div calss="headClass">我是div</div>
E[attr$="val"] { sRules }
选定具有属性 attr 且属性值以 val 结尾的字符串的⽂档元素 E
/** 设置 class 属性的值以 Class 结尾的元素为红⾊ **/
div[class$="Class"] {
color: red;
}
<div calss="headClass">我是div</div>
E[attr*="val"] { sRules }
选定具有属性 attr 且属性值包含 val 的字符串的⽂档元素 E
/** 设置 class 属性的值包含 Div 的元素为红⾊ **/
div[class*="Div"] {
color: red;
}
<div calss="headDivClass">我是div</div>
选定具有属性 attr 且属性值以 val 开头并⽤连接符 "-" 分隔的字符串（包含属性值只有 val 的情况）的⽂档元素 E /** 设置 class 属性的值以 head 开头并⽤连接符 "-" 分隔的元素为红⾊ **/
div[class|="head"] {
color: red;
}
<div calss="head-class">我是div</div>
关系选择器
后代选择器
E F { sRules }
选定⽂档元素 E 所有的后代元素 F，包含所有⼦孙
/* 设置 div 后代所有的 p 为红⾊ */
div p {
color: red;
}
<div>
<p>我是段落1</p>
<div>
<p>我是段落2</p>
</div>
</div>
⼦代选择器
E>F { sRules }
选定⽂档元素 E 所有的⼦代元素 F，不包含孙代元素
/* 设置 div ⼦代的 p 为红⾊，但孙代的 p 不为红⾊ */
div>p {
color: red;
}
<div>
<p>我是段落1</p>
<div>
<p>我是段落2</p>
</div>
</div>
相邻选择器
E+F { sRules }
选定⽂档元素 E 之后且同属⼀个⽗元素的相邻兄弟元素 F
/* 设置 h1 相邻的 p 为红⾊，但第⼆个 p 不为红⾊ */
h1>p {
color: red;
}
<div>
<h1>我是h1</h1>
<p>我是段落1</p>
<p>我是段落2</p>
</div>
兄弟选择器
E~F { sRules } CSS3
选定⽂档元素 E 之后且同属⼀个⽗元素的兄弟元素 F
/* 设置 h1 之后所有的 p 为红⾊ */
h1>p {
color: red;
}
<div>
<p>我是段落2</p>
</div>
伪类选择器
:link
a:link { sRules }
设置超链接 a 未被访问前的样式
a:link {
color: blue;
}
<a href=""></a>
:visited
a:visited { sRules }
设置超链接 a 已经被访问后的样式
a:link {
color: red;
}
<a href=""></a>
:focus
E:focus { sRules }
设置元素 E 在成为输⼊焦点（该元素的 onfocus 事件发⽣）时的样式
a:focus {
color: black;
}
<a href=""></a>
:hover
E:hover { sRules }
设置元素E在⿏标悬停时的样式
a:hover {
color: red;
}
<a href=""></a>
:active
E:active { sRules }
设置元素E在被⽤户激活（在⿏标点击与释放之间发⽣的事件）时的样式
a:active{
color: green;
}
<a href=""></a>
以上五种伪类选择器同时⽤在a超链接时，各伪类需按特定的顺序书写才能⽣效，保证各浏览器具有相同的表现。

正确的顺序为：link - visited - focus - hover - active
:lang(lang)
E:lang(lang) { sRules }
选定使⽤特殊语⾔的元素E
color: #f00;
}
p:lang(en) {
color: #090;
}
<p lang="zh-cn">我是中⽂</p>
<p lang="en">i am English</p>
:not(s) CSS3
E:not(s) { sRules }
匹配不含有s选择符的元素E
/** 除最后⼀个li之外，所有li加⼀条底边线 **/
li:not(:last-child) {
border-bottom: 1px solid #ddd;
}
<ul>
<li></li>
<li></li>
<li></li>
</ul>
:root CSS3
:root { sRules }
匹配当前⽂档的根元素。

在HTML中，根元素永远是HTML
/** :root 相当于 html **/
:root {
color: red;
}
:first-child
E:first-child { sRules }
匹配⽗元素的第⼀个⼦元素 E。

要使该属性⽣效，E 元素必须是某个元素的⼦元素，E 的⽗元素最⾼是 body，即 E 可以是 body 的⼦元素
最重要的是： E 必须是它的兄弟元素中的第⼀个元素，换⾔之，E 必须是⽗元素的第⼀个⼦元素。

与之类似的伪类还有 E:last-child，只不过情况正好相反，需要它是最后⼀个⼦元素。

/** 给第⼀个 li 加⼀条底边线 **/
li:first-child {
border-bottom: 1px solid #ddd;
}
/** 本意是想设置第⼀个 p 元素为红⾊，但这⾥⽆效，因为 p 不是 div 的第⼀个⼦元素（第⼀个⼦元素是 h2 ） **/
p:first-child {
color: red;
}
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<div>
<h2>我是⼀个标题</h2>
<p>我是⼀个p</p>
</div>
:last-child CSS3
E:last-child { sRules }
匹配⽗元素的最后⼀个⼦元素E。

要使该属性⽣效，E 元素必须是某个元素的⼦元素，E 的⽗元素最⾼是 body，即 E 可以是 body 的⼦元素
最重要的是： E 必须是它的兄弟元素中的最后⼀个元素，换⾔之，E 必须是⽗元素的最后⼀个⼦元素。

与之类似的伪类还有 E:first-child，只不过情况正好相反，需要它是第⼀个⼦元素。

/** 给最后⼀个 li 加⼀条底边线 **/
/** 本意是想设置最后⼀个 h2 元素为红⾊，但这⾥⽆效，因为 h2 不是 div 的最后⼀个⼦元素（最后⼀个⼦元素是 p ） **/
p:first-child {
color: red;
}
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<div>
<h2>我是⼀个标题</h2>
<p>我是⼀个p</p>
</div>
:only-child CSS3
E:only-child { sRules }
匹配⽗元素仅有的⼀个⼦元素 E。

要使该属性⽣效，E 元素必须是某个元素的⼦元素，E 的⽗元素最⾼是 body，即 E 可以是 body 的⼦元素
/** 该规则当元素中只有⼀个 li 有效，即可设置 li 为红⾊，如果有多个 li 则⽆效。

**/
li:only-child {
color: red;
}
<ul>
<li>li:only-child对我有效，我会变红⾊</li>
</ul>
<ul>
<li>li:only-child对我⽆效，我不会变红⾊</li>
<li>li:only-child对我⽆效，我不会变红⾊</li>
<li>li:only-child对我⽆效，我不会变红⾊</li>
</ul>
:nth-child(n) CSS3
E:nth-child(n) { sRules }
要使该属性⽣效，E 元素必须是某个元素的⼦元素，E 的⽗元素最⾼是 body，即 E 可以是 body 的⼦元素
匹配⽗元素的第 n 个⼦元素 E，假设该⼦元素不是 E，则选择符⽆效，但 n 会累加
<style>
/* 第⼆个 p 会被设置成红⾊，因为它是⽗元素的第⼆个元素 */
p:nth-child(2) {
color: red;
}
/* 第三个 p 不会设置成红⾊，因为⽗元素的第三个元素不是 p，⽽是 span */
p:nth-child(3) {
color: red;
}
/* 第三个 p 会被设置成红⾊，因为它是⽗元素的第四个元素 */
p:nth-child(4) {
color: red;
}
</style>
<div>
<p>第1个p</p>
<p>第2个p</p>
<span>第1个span</span>
<p>第3个p</p>
<span>第2个span</span>
<p>第4个p</p>
<p>第5个p</p>
</div>
该选择符允许使⽤⼀个乘法因⼦(n) 来作为换算⽅式，⽐如我们想选中所有的偶数⼦元素 E，那么选择符可以写成：E:nth-child(2n)，也可以使⽤⼀些关键字，⽐如：odd, even。

E:nth-child(even) 选择偶数⼦元素，E:nth-child(old) 选择奇数⼦元素
<style>
/* 偶数或者 E:nth-child(even) */
li:nth-child(2n) {
/* 奇数或者，E:nth-child(old) */
li:nth-child(2n+1) {
color: blue;
}
</style>
<ul>
<li>列表项⼀</li>
<li>列表项⼆</li>
<li>列表项三</li>
<li>列表项四</li>
</ul>
:nth-last-child(n) CSS3
E:nth-last-child(n) { sRules }
要使该属性⽣效，E元素必须是某个元素的⼦元素，E的⽗元素最⾼是body，即E可以是body的⼦元素
该选择符允许使⽤⼀个乘法因⼦(n)来作为换算⽅式，⽐如我们想选中倒数第⼀个⼦元素E，那么选择符可以写成：E:nth-last-child(1)匹配⽗元素的倒数第n个⼦元素E，假设该⼦元素不是E，则选择符⽆效
<style>
/* 设置倒数第⼀个 p 为红⾊，因为该 p 元素是⽗元素的倒数第⼆元素 */
p:nth-last-child(2) {
color: red;
}
</style>
<div>
<p>第1个p</p>
<p>第2个p</p>
<span>第1个span</span>
<p>第3个p</p>
<span>第2个span</span>
</div>
:first-of-type CSS3
E:first-of-type { sRules }
匹配同类型中的第⼀个同级兄弟元素E
要使该属性⽣效，E元素必须是某个元素的⼦元素，E的⽗元素最⾼是html，即E可以是html的⼦元素，也就是说E可以是body
该选择符总是能命中⽗元素的第1个为E的⼦元素，不论第1个⼦元素是否为E
<style>
/* 设置第⼀个元素类型为 p 的元素为红⾊，尽管该 p 元素不是⽗元素的第⼀个元素 */
p:first-of-type {
color: red;
}
</style>
<div>
<div>我是⼀个div元素</div>
<p>我是⼀个p元素</p>
<p>我是⼀个p元素</p>
</div>
:last-of-type CSS3
E:last-of-type { sRules }
匹配同类型中的最后⼀个同级兄弟元素E
要使该属性⽣效，E元素必须是某个元素的⼦元素，E的⽗元素最⾼是html，即E可以是html的⼦元素，也就是说E可以是body
该选择符总是能命中⽗元素的倒数第1个为E的⼦元素，不论倒是第1个⼦元素是否为E
<style>
/* 设置倒数⼀个元素类型为 p 的元素为红⾊，尽管该 p 元素不是⽗元素的倒数第⼀个元素 */
p:first-of-type {
color: red;
}
<div>
<p>我是⼀个p元素</p>
<p>我是⼀个p元素</p>
<div>我是⼀个div元素</div>
</div>
:only-of-type CSS3
E:only-of-type { sRules }
匹配同类型中的唯⼀的⼀个同级兄弟元素E
要使该属性⽣效，E元素必须是某个元素的⼦元素，E的⽗元素最⾼是html，即E可以是html的⼦元素，也就是说E可以是body 该选择符总是能命中⽗元素的唯⼀同类型⼦元素E，不论该元素的位置
<style>
/* 设置⽗元素中唯⼀的 p 元素为红⾊，有多个 p 元素⽆效 */
p:only-of-type {
color: red;
}
</style>
<div>
<p>p:only-of-type对我有效，我会变红⾊</p>
</div>
<div>
<p>p:only-of-type对我⽆效，我不会变红⾊</p>
<p>p:only-of-type对我⽆效，我不会变红⾊</p>
</div>
:nth-of-type(n) CSS3
E:nth-of-type(n) { sRules }
匹配同类型中的第n个同级兄弟元素E
要使该属性⽣效，E元素必须是某个元素的⼦元素，E的⽗元素最⾼是html，即E可以是html的⼦元素，也就是说E可以是body 该选择符总是能命中⽗元素的第n个为E的⼦元素，不论第n个⼦元素是否为E
<style>
/* 设置⽗元素第⼆个 p 元素为红⾊，虽然该 p 元素为⽗元素的第三个元素 */
p:nth-of-type(2) {
color: red;
}
</style>
<div class="test">
<p>我是⼀个p元素</p>
<div>我是⼀个div元素</div>
<p>我是⼀个p元素</p>
<p>我是⼀个p元素</p>
</div>
:nth-last-of-type(n) CSS3
E:nth-last-of-type(n) { sRules }
匹配同类型中的倒数第n个同级兄弟元素E
要使该属性⽣效，E元素必须是某个元素的⼦元素，E的⽗元素最⾼是html，即E可以是html的⼦元素，也就是说E可以是body 该选择符总是能命中⽗元素的倒数第n个为E的⼦元素，不论倒数第n个⼦元素是否为E
<style>
p:nth-last-of-type(1) {
color: red;
}
</style>
<div class="test">
<p>我是⼀个p元素</p>
<div>我是⼀个div元素</div>
<p>我是⼀个p元素</p>
<p>我是⼀个p元素</p>
:empty CSS3
E:empty { sRules }
匹配没有任何⼦元素（包括text节点）的元素E
<style>
p:empty {
height: 25px;
border: 1px solid #ddd;
background: #eee;
}
</style>
<div>
<p>结构性伪类选择符 E:empty</p>
<p><!--我是⼀个空节点p，请注意我与其它⾮空节点p的外观有什么不⼀样--></p>
<p>结构性伪类选择符 E:empty</p>
</div>
:checked CSS3
E:checked { sRules }
匹配⽤户界⾯上处于选中状态的元素E。

(⽤于input type为radio与checkbox时) <style>
input:checked + span {
background: red;
}
</style>
<input type="radio" />
<span>红⾊</span>
:enabled CSS3
E:enabled { sRules }
匹配⽤户界⾯上处于可⽤状态的元素E
<style>
input[type="text"]:enabled {
border: 1px solid #090;
background: #fff;
color: #000;
}
input[type="text"]:disabled {
border: 1px solid #ccc;
background: #eee;
color: #ccc;
}
</style>
<input type="text" value="可⽤状态" />
<input type="text" value="禁⽤状态" disabled="disabled" />
:disabled CSS3
E:disabled { sRules }
匹配⽤户界⾯上处于禁⽤状态的元素E
<style>
input[type="text"]:enabled {
border: 1px solid #090;
background: #fff;
color: #000;
}
input[type="text"]:disabled {
border: 1px solid #ccc;
background: #eee;
color: #ccc;
}
<input type="text" value="可⽤状态" />
<input type="text" value="禁⽤状态" disabled="disabled" />
:target CSS3
E:target { sRules }
匹配相关URL指向的E元素
解释： URL后⾯跟锚点#，指向⽂档内某个具体的元素。

这个被链接的元素就是⽬标元素(target element)，:target选择器⽤于选取当前活动的⽬标元素
<!-- 假设上述代码在页⾯ a.html 中，那么当访问 a.html#demo 时，这个div元素将会被:target命中 -->
<style>
#demo:target {
color: red;
}
</style>
<div id="demo">
<p>E:target伪类使⽤⽅法</p>
</div>
@page相关选择器
@page :first { sRules }
设置在打印时页⾯容器第⼀页使⽤的样式。

该伪类选择符只允许定义margin, orphans, widows 和 page breaks相关属性
@page :left { sRules }
设置页⾯容器位于装订线左边的所有页⾯使⽤的样式。

该伪类选择符只允许定义margin, padding, border 和 background属性
@page :right { sRules }
设置页⾯容器位于装订线右边的所有页⾯使⽤的样式。

该伪类选择符只允许定义margin, padding, border 和 background属性
伪对象选择器
::first-letter CSS3
E::first-letter { sRules }
设置对象内的第⼀个字符的样式
此伪对象仅作⽤于块对象。

内联对象要使⽤该伪对象，必须先将其设置为块级对象
该伪对象常被⽤来配合font-size属性和float属性制作⾸字下沉效果
<style>
p::first-letter {
float:left;
font-size:40px;
font-weight:bold;
line-height:1;
}
</style>
<h1>杂志常⽤的⾸字下沉效果</h1>
<p>今天，阳光明媚，晴空万⾥，⾮常适合户外活动，如踏青、远⾜之类的。

长期坐在办公室的同学们要多注意运动。

</p>
::first-line CSS3
E::first-line { sRules }
设置对象内的第⼀⾏的样式
<style>
p::first-line {
color:#090;
}
</style>
<h1>第⼀⾏⽂字的颜⾊与其它不同</h1>
<p>今天，阳光明媚，晴空万⾥，⾮常适合户外活动，如踏青、远⾜之类的。

长期坐在办公室的同学们要多注意运动。

</p>
::before CSS3
E::before { sRules }
设置在对象前（依据对象树的逻辑结构）发⽣的内容。

⽤来和content属性⼀起使⽤，并且必须定义content属性
<style>
p::before {
position: absolute;
left: 0;
background: #fff;
color: #000;
content: "在 p 元素中 span 元素之前可看到这段⽂字";
font-size:14px;
}
</style>
<p>
<span>我是⼀个span</span>
</p>
::after CSS3
E::after { sRules }
设置在对象前（依据对象树的逻辑结构）发⽣的内容。

⽤来和content属性⼀起使⽤，并且必须定义content属性
<style>
p::after {
position: absolute;
left: 0;
background: #fff;
color: #000;
content: "在 p 元素中 span 元素之后可看到这段⽂字";
font-size:14px;
}
</style>
<p>
<span>我是⼀个span</span>
</p>
::placeholder CSS3
E::placeholder { sRules }
设置对象⽂字占位符的样式。

::placeholder 伪元素⽤于控制表单输⼊框占位符的外观，它允许开发者/设计师改变⽂字占位符的样式，默认的⽂字占位符为浅灰⾊。

当表单背景⾊为类似的颜⾊时它可能效果并不是很明显，那么就可以使⽤这个伪元素来改变⽂字占位符的颜⾊。

需要注意的是，除了Firefox是 ::[prefix]placeholder，其他浏览器都是使⽤ ::[prefix]input-placeholder
<style>
input::-webkit-input-placeholder {
color: green;
}
input:-ms-input-placeholder { // IE10+
color: green;
}
input:-moz-placeholder { // Firefox4-18
color: green;
}
input::-moz-placeholder { // Firefox19+
color: green;
}
</style>
<input id="test" placeholder="Placeholder text!">
::selection CSS3
E::selection { sRules }
设置对象被选择时的样式。

需要注意的是，::selection只能定义被选择时的background-color，color及text-shadow <style>
p::selection{
background:#000;
color:#f00;
}
</style>
<p>当我被选中是，我会变成⿊⾊背景红⾊⽂字</p>。