前面文章总结了常用的8种选择器，今天再来补充5中选择器，其中一部分是css3中新加入的。
1、相邻选择器
E+F { sRules }
相邻选择符只会命中符合条件的相邻的兄弟元素。
2、兄弟选择器
E~F { sRules }
兄弟选择符会命中所有符合条件的兄弟元素，而不强制是紧邻的元素。
<style> /* 相邻选择符(E+F) */ h3 + p { color: #f00; } /* 兄弟选择符(E~F) */ h3 ~ p { color: #f00; } </style> <h3>这是一个标题</h3> <p>p1</p> <p>p2</p> <p>p3</p>
这个例子中，如果是相邻选择符，那么只有 p1 会变成红色；如果是兄弟选择符，那么 p1/p2/p3 都会变成红色；
3、属性选择器
属性选择器一共有7种选择形式。
E[att] { sRules }
选择具有att属性的E元素。
<style> img[alt] { margin: 10px; } </style> <img src="图片url" alt="" /> <img src="图片url" />
此例，将会命中第一张图片，因为匹配到了alt属性
E[att="val"] { sRules }
选择具有att属性且属性值等于val的E元素。
<style> input[type="text"] { border: 2px solid #000; } </style> <input type="text" /> <input type="submit" />
此例，将会命中第一张input，因为匹配到了type属性，并且属性值为text
E[att~="val"] { sRules }
选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素（包含只有一个值且该值等于val的情况）。
<style> div[class~="a"] { border: 2px solid #000; } </style> <div class="a">1</div> <div class="b">2</div> <div class="a b">3</div>
此例，将会命中1, 3两个div，因为匹配到了class属性，且属性值中有一个值为a
E[att^="val"] { sRules }
选择具有att属性且属性值为以val开头的字符串的E元素。
<style> div[class^="a"] { border: 2px solid #000; } </style> <div class="abc">1</div> <div class="acb">2</div> <div class="bac">3</div>
此例，将会命中1, 2两个div，因为匹配到了class属性，且属性值以a开头
E[att$="val"] { sRules }
选择具有att属性且属性值为以val结尾的字符串的E元素。
<style> div[class$="c"] { border: 2px solid #000; } </style> <div class="abc">1</div> <div class="acb">2</div> <div class="bac">3</div>
此例，将会命中1, 3两个div，因为匹配到了class属性，且属性值以c结尾
E[att*="val"] { sRules }
选择具有att属性且属性值为包含val的字符串的E元素。
<style> div[class*="b"] { border: 2px solid #000; } </style> <div class="abc">1</div> <div class="acb">2</div> <div class="bac">3</div>
此例，将会命中所有div，因为匹配到了class属性，且属性值中都包含了b
E[att|="val"] { sRules }
选择具有att属性，其值是以val开头并用连接符"-"分隔的字符串的E元素；如果值仅为val，也将被选择。
这样理解会更简单：如果元素E拥有att属性，并且值为val，或者值是以val-开头的，那么E将会被选择。
<style> div[class|="a"] { border: 2px solid #000; } </style> <div class="a">0</div> <div class="a-test">1</div> <div class="b-test">2</div> <div class="c-test">3</div>
在这个例子中，前2个div将会被命中：
第1个div，拥有class属性，并且值为a，所以被命中；
第2个div，拥有class属性，值是a开头并紧跟着连接符“-”，所以被命中；
4、伪类选择器
伪类选择器的种类比较多，一共有二十多种。
E:link { sRules }
设置超链接a在未被访问前的样式。
如果需要给超链接定义：访问前，鼠标悬停，当前被点击，已访问这4种伪类效果，而又没有按照一致的书写顺序，不同的浏览器可能会有不同的表现
超链接的4种状态，需要有特定的书写顺序才能生效。
超链接状态顺序：
a:link {}
a:visited {}
a:hover {}
a:active {}
注意，a:hover 必须位于 a:link 和 a:visited 之后，a:active 必须位于 a:hover 之后
可靠的顺序是：l(link)ov(visited)e h(hover)a(active)te, 即用喜欢(love)和讨厌(hate)两个词来概括
E:visited { sRules }
设置超链接a在其链接地址已被访问过时的样式。
E:hover { sRules }
设置元素在其鼠标悬停时的样式。
E:active { sRules }
设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式。
E:focus { sRules }
设置对象在成为输入焦点（该对象的onfocus事件发生）时的样式。
webkit内核浏览器会默认给:focus状态的元素加上outline的样式。
E:lang(fr) { sRules }
匹配使用特殊语言的E元素。
<style>
p:lang(zh-cmn-Hans) {
color: #f00;
}
p:lang(en) {
color: #090;
}
</style>
</head>
<body>
<p lang="zh-cmn-Hans">大段测试文字</p>
<p lang="en">english</p>
E:not(s) { sRules }
匹配不含有s选择符的元素E。
有了这个选择符，那么你将可以很好的处理类似这样的场景：假定有个列表，每个列表项都有一条底边线，但是最后一项不需要底边线
.demo li:not(:last-child) {
border-bottom: 1px solid #ddd;
}
上述代码的意思是：给该列表中除最后一项外的所有列表项加一条底边线
E:first-child { sRules }
匹配父元素的第一个子元素E。
要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是body，即E可以是body的子元素。
<ul>
<li>列表项一</li>
<li>列表项二</li>
<li>列表项三</li>
<li>列表项四</li>
</ul>
在上述代码中，如果我们要设置第一个li的样式，那么代码应该写成li:first-child{sRules}，而不是ul:first-child{sRules}。
示例代码：
p:first-child{color:#f00;}
<div>
<h2>我是一个标题</h2>
<p>我是一个p</p>
</div>
只是在p前面加了一个h2标签，你会发现选择器失效了，没有命中p，why?
E:first-child选择符，E必须是它的兄弟元素中的第一个元素，换言之，E必须是父元素的第一个子元素。与之类似的伪类还有E:last-child，只不过情况正好相反，需要它是最后一个子元素。
E:last-child { sRules }
匹配父元素的最后一个子元素E。
E:nth-child(n) { sRules }
匹配父元素的第n个子元素E，假设该子元素不是E，则选择符无效。
要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是body，即E可以是body的子元素
该选择符允许使用一个乘法因子(n)来作为换算方式，比如我们想选中所有的偶数子元素E，那么选择符可以写成：E:nth-child(2n)
使用E:nth-child(n)实现奇偶：
示例代码：
<style>
li:nth-child(2n){color:#f00;} /* 偶数 */
li:nth-child(2n+1){color:#000;} /* 奇数 */
</style>
<ul>
<li>列表项一</li>
<li>列表项二</li>
<li>列表项三</li>
<li>列表项四</li>
</ul>
因为(n)代表一个乘法因子，可以是0, 1, 2, 3, ..., 所以(2n)换算出来会是偶数，而(2n+1)换算出来会是奇数
有一点需要注意的是：
HTML示例代码：
<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>
CSS Case 1：
p:nth-child(2){color:#f00;}
很明显第2个p会被命中然后变成红色
CSS Case 2：
p:nth-child(3){color:#f00;}
这是会命中第3个p么？如果你这么认为那就错了，这条选择符就不会命中任何一个元素。
CSS Case 3：
p:nth-child(4){color:#f00;}
这时你以为会命中第4个p，但其实命中的却是第3个p，因为它是第4个子元素
E:nth-child(n)会选择父元素的第n个子元素E，如果第n个子元素不是E，则是无效选择符，但n会递增。
E:nth-last-child(n) { sRules }
匹配父元素的倒数第n个子元素E，假设该子元素不是E，则选择符无效。
E:first-of-type { sRules }
匹配同类型中的第一个同级兄弟元素E。
要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是html，即E可以是html的子元素，也就是说E可以是body
该选择符总是能命中父元素的第1个为E的子元素，不论第1个子元素是否为E
E:last-of-type { sRules }
匹配同类型中的最后一个同级兄弟元素E。
E:nth-of-type(n) { sRules }
匹配同类型中的第n个同级兄弟元素E。
有一点需要注意的是：
HTML示例代码：
<div>
<p>第1个p</p>
<p>第2个p</p>
<span>第1个span</span>
<p>第3个p</p>
<span>第2个span</span>
</div>
如上HTML，假设要命中第一个span：
span:nth-of-type(1){color:#f00;}
如果使用E:nth-child(n)：
span:nth-child(3){color:#f00;}
E:nth-last-of-type(n) { sRules }
匹配同类型中的倒数第n个同级兄弟元素E。
E:checked { sRules }
匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)
<style> input:checked + span { background: #f00; } input:checked + span:after { content: " 我被选中了"; } </style> </head> <body> <form method="post" action="#"> <fieldset> <legend>选中下面的项试试</legend> <ul> <li><label><input type="radio" name="colour-group" value="0" /><span>蓝色</span></label></li> <li><label><input type="radio" name="colour-group" value="1" /><span>红色</span></label></li> <li><label><input type="radio" name="colour-group" value="2" /><span>黑色</span></label></li> </ul> </fieldset> <fieldset> <legend>选中下面的项试试</legend> <ul> <li><label><input type="checkbox" name="colour-group2" value="0" /><span>蓝色</span></label></li> <li><label><input type="checkbox" name="colour-group2" value="1" /><span>红色</span></label></li> <li><label><input type="checkbox" name="colour-group2" value="2" /><span>黑色</span></label></li> </ul> </fieldset> </form> </body>
E:target { sRules }
匹配相关URL指向的E元素。
解释：URL后面跟锚点#，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)，:target选择器用于选取当前活动的目标元素。
示例代码：
#demo:target{color:#f00;}
<div id="demo">
<p>E:target伪类使用方法</p>
</div>
假设上述代码在页面 a.html 中，那么当访问 a.html#demo 时，这个div元素将会被:target命中
5、伪元素选择器
E:first-letter/E::first-letter { sRules }
设置对象内的第一个字符的样式。
此伪对象仅作用于块对象。内联对象要使用该伪对象，必须先将其设置为块级对象。
该伪类常被用来配合font-size属性和float属性制作首字下沉效果。
CSS3将伪对象选择符(Pseudo-Element Selectors)前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符(Pseudo-Classes Selectors)，但以前的写法仍然有效。
即E:first-letter可转化为E::first-letter
E:first-line/E::first-line { sRules }
设置对象内的第一行的样式。
此伪对象仅作用于块对象。内联对象要使用该伪对象，必须先将其设置为块级对象。
E:before/E::before { sRules }
设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用，并且必须定义content属性
E:after/E::after { sRules }
设置在对象后（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用，并且必须定义content属性
E::placeholder { sRules }
设置对象文字占位符的样式。
- ::placeholder 伪元素用于控制表单输入框占位符的外观，它允许开发者/设计师改变文字占位符的样式，默认的文字占位符为浅灰色。
- 当表单背景色为类似的颜色时它可能效果并不是很明显，那么就可以使用这个伪元素来改变文字占位符的颜色。
- 需要注意的是，除了Firefox是 ::[prefix]placeholder，其他浏览器都是使用 ::[prefix]input-placeholder
<input type="text" placeholder="占位符" /> input::-webkit-input-placeholder { color: #999; } input:-ms-input-placeholder { // IE10+ color: #999; } input:-moz-placeholder { // Firefox4-18 color: #999; } input::-moz-placeholder { // Firefox19+ color: #999; }
E::selection { sRules }
设置对象被选择时的样式。
需要注意的是，::selection只能定义被选择时的background-color，color及text-shadow(IE11尚不支持定义该属性)。