- 2018-01-17更新nth-of-type(n)，以及和nth-child(n)的区别
属性选择器
a[title]{color:#ddd;}
//为存在title属性的a设置颜色
input[type="text"]{width:100px}
//为type为text文本框的input设置宽度
部分属性选择器（css2新增）
<p class = "name text">
p[class~="name"]{color:red}
//部分属性名匹配
子串匹配属性（css3新增）
[abc^="def"] //选择 abc 属性值以 "def" 开头的所有元素
[abc$="def"] //选择 abc 属性值以 "def" 结尾的所有元素
[abc*="def"] //选择 abc 属性值中包含子串 "def" 的所有元素
- 其中[abc*="def"]和[abc~="def"]的区别
<p class="class1 class2"></p>
p[class~="class1"] //选择成功
p[class~="class1 clas"] //选择失败
p[class*="class1 clas"] //选择成功
总而言之还是*最强大
子元素和兄弟选择器
<div class="container">
<p>~~~~~~~</p>
<li>~~~~~~~~</li>
<li>~~~~~~~~</li>
<p>~~~~~~~~</p>
<p>~~~~~~~~</p>
<li>~~~~~~~~</li>
<li>~~~~~~~~</li>
</div>
子元素选择器：> 、 nth-child(n)、nth-of-type(n)
>比较常见，用于选择当前标签的所有子元素
nth-child(n)：位置优先，用于选择当前标签下的第n个子元素，若选中位置没有该标签，则选择失败
li:nth-child(2){}
//代表在li的父元素下寻找指定位置 ，且为li的子元素
li:nth-child(2)：选中第二位，且为Li的元素
//中间加一个空格，代表没有指定标签
.container :nth-child(2){}
//可以理解为选择container下的第二个子元素
.container :nth-child(2)：选择container下的第二个子元素
nth-of-type(n)：标签优先，用于选择父元素下的第n个指定标签子元素，
li:nth-of-type(2){} //代表在li的父元素下寻找第二个li
li:nth-of-type(2)：选择第2个li标签
//中间加一个空格，代表没有指定元素
.container :nth-of-type(2){}
//选择container父元素下每种标签的第二个子元素，即寻找所有标签的第二个
.container :nth-of-type(2)：选中每种标签的第二个
兄弟选择器：+和~
+用于选择当前标签后面一个同级元素
li:nth-child(2) + li{} //选择第二个元素之后的一个同级元素
找到第2个元素，且为li标签，选中紧邻其后的，且为li的标签
~用于选择当前标签后面的所有同级元素
li:nth-child(2) ~ li{} //选择第二个元素之后所有的同级元素
找到第2个元素，且为li标签，选中其之后的同层级所有li标签
