css选择器的对比样式代码精简

通常就分为这三大类：
* 选定所有对象。通配选择符(Universal Selector)通常不建议使用通配选择符，因为它会遍历并命中文档中所有的元素，出于性能考虑，需酌情使用
一、标签选择器，以开始标签作为选择器使用。
二、id选择器以唯一标识符id属性识别（表示#name）
#name{
font-size:16px;
}
三、class类选择器以不同于ID选择符的唯一性，类选择符可以同时定义多个（表示.name）
.name{
font-size:16px;
}
类选择符高级用法：多类选择符
.a.b {
color: #000;
}
<div class="a b">多类选择符使用方法</div>
包含选择符
.demo div {border:1px solid #fff;}
子选择符
.demo > div {border:1px solid #fff;}
区别：与子选择符（子选择符只能命中子元素）不同的是，包含选择符将会命中所有符合条件的后代。

相邻选择符

p+p{color:#f00;}

兄弟选择符

p~p{color:#f00;}
区别：与兄弟选择符（兄弟选择符会命中所有符合条件的兄弟元素）不同的是，相邻选择符只会命中符合条件的相邻的兄弟元素。
属性选择器的几种用法：
普通：
<style>
img[alt] {
margin: 10px;
}
</style>
<img src="图片url" alt="" /> /*这张被选中*/
<img src="图片url" />

第一种：（选择具有xxx属性且属性值等于xxx的元素。）
<style>
input[type="text"] {
border: 1px solid #000;
}
</style>
<input type="text" />
<input type="submit" />

第二种：[选择具有xxx属性且属性值为一用空格分隔的字词列表，其中一个等于a的元素（包含只有一个值且该值等于a的情况）]
<style>
div[class~="a"] {
border: 1px solid #000;
}
</style>
<div class="a">1</div> /*第一个、第三个选中*/
<div class="b">2</div>
<div class="a b">3</div>

第三种：（选择具有xxx属性且属性值为以a开头的字符串的元素。）
<style>
div[class^="a"] {
border: 1px solid #000;
}
</style>
<div class="abc">1</div> /*第一个、第二个选中*/
<div class="acb">2</div>
<div class="bac">3</div>

第四种：(选择具有xxx属性且属性值为以c结尾的字符串的元素)
<style>
div[class$="c"] {
border: 1px solid #000;
}
</style>
<div class="abc">1</div> /*第一个、第三个选中*/
<div class="acb">2</div>
<div class="bac">3</div>

第五种：（选择具有xxx属性且属性值为包含b的字符串的元素。）
<style>
div[class*="b"] {
border: 1px solid #000;
}
</style>
<div class="abc">1</div> /*全部选中*/
<div class="acb">2</div>
<div class="bac">3</div>

第六种:（选择具有xxx属性且属性值为以a开头并用连接符"-"分隔的字符串的元素，如果属性值仅为a，也将被选择）
<style>
div[class|="a"] {
border: 1px solid #000;
}
</style>
<div class="a-test">1</div> /*第一个选中*/
<div class="b-test">2</div>
<div class="c-test">3</div>

伪类选择器：（访问前，鼠标悬停，当前被点击，已访问）
a:link {}
a:visited {}
a:hover {}
a:active {}
从上到下的顺序

xxx:focus
设置对象在成为输入焦点（该对象的onfocus事件发生）时的样式。
webkit内核浏览器会默认给:focus状态的元素加上outline的样式。

xxx:lang(fr) 匹配使用特殊语言的xxx元素。

xxx:not(s) 匹配不含有s选择符的元素。
有了这个选择符，那么你将可以很好的处理类似这样的场景：假定有个列表，每个列表项都有一条底边线，但是最后一项不需要底边线
.demo li:not(:last-child) {
border-bottom: 1px solid #ddd;
}

xxx:first-child/xxx:last-child匹配父元素的第一个/最后一个子元素。
要使该属性生效，xxx元素必须是某个元素的子元素，xxx的父元素最高是body，即xxx元素可以是body的子元素

xxx:only-child 匹配父元素仅有的一个子元素。
要使该属性生效，xxx元素必须是某个元素的子元素，xxx元素的父元素最高是body，即xxx元素可以是body的子元素

xxxx:nth-child(n) 匹配父元素的第n个子元素xxx，假设该子元素不是xxx，则选择符无效。
如：
li:nth-child(2n){color:#fff;} /* 偶数 */
li:nth-child(2n+1){color:#000;} /* 奇数 */

xxx:nth-last-child(n) 匹配父元素的倒数第n个子元素xxx，假设该子元素不是xxx，则选择符无效。

xxx:first-of-type 匹配同类型中的第一个同级兄弟元素xxx。
xxx:last-of-type 匹配同类型中的最后一个同级兄弟元素xxx。
要使该属性生效，xxx元素必须是某个元素的子元素，xxx的父元素最高是html，即xxx可以是html的子元素，也就是说xxx可以是body
该选择符总是能命中父元素的第1个/最后一个为xxx的子元素，不论第1个/最后一个子元素是否为E

xxx:only-of-type 匹配同类型中的唯一的一个同级兄弟元素xxx。
p:only-of-type {
color: #000;
}
<div class="test">
<p>结构性伪类选择符 xxx:only-of-type</p>
</div>

xxx:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素xxx。
<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:#000;}
如果使用xxx:nth-child(n)：
span:nth-child(3){color:#000;}

xxx:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素xxx。
xxx:empty匹配空节点元素

xxx:checked 匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)
input:checked + span {
background: #f00;
}
input:checked + span:after {
content: " 我被选中了"; /*使用样式追加文字*/
}

xxx:enabled 匹配用户界面上处于可用状态的元素E。 / xxx:disabled 匹配用户界面上处于禁用状态的元素xxx。
input[type="text"]:enabled {
border: 1px solid #000;
background: #fff;
color: #000;
}
input[type="text"]:disabled {
border: 1px solid #333;
background: #ff9933;
color: #666;
}
<ul>
<li><input type="text" value="可用状态" /></li>
<li><input type="text" value="可用状态" /></li>
<li><input type="text" value="禁用状态" disabled="disabled" /></li>
<li><input type="text" value="禁用状态" disabled="disabled" /></li>
</ul>

伪对象选择器
xxx:first-letter/xxx::first-letter 设置对象内的第一个字符的样式。(如首字下沉)
此伪对象仅作用于块对象。内联对象要使用该伪对象，必须先将其设置为块级对象。
该伪类常被用来配合font-size属性和float属性制作首字下沉效果。

xxx:first-line/xxx::first-line 设置对象内的第一行的样式。
此伪对象仅作用于块对象。内联对象要使用该伪对象，必须先将其设置为块级对象。

xxx:placeholder 设置对象文字占位符的样式。
兼容写法:除了Firefox是 ::[prefix]placeholder，其他浏览器都是使用 ::[prefix]input-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;
}

xxx::selection 设置对象被选择时的样式。
需要注意的是，::selection只能定义被选择时的background-color，color及text-shadow(IE11尚不支持定义该属性)。