css3选择器

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标签