- 2018-01-17更新nth-of-type(n)恋谭，以及和nth-child(n)的區(qū)別
屬性選擇器
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"]的區(qū)別
<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)：位置優(yōu)先厘擂，用于選擇當前標簽下的第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)：標簽優(yōu)先漫谷，用于選擇父元素下的第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標簽，選中其之后的同層級所有l(wèi)i標簽
