學習CSS3中的選擇器有助于我們更簡潔更快編寫樣式
結(jié)構(gòu)性偽類
E:nth-child(n) 表示E父元素中的第n個字節(jié)點
p:nth-child(odd){background:red} /匹配奇數(shù)行/
p:nth-child(even){background:red} /匹配偶數(shù)行/
p:nth-child(2n){background:red}
E:nth-last-child(n)表示E父元素中的第n個字節(jié)點，從后向前計算
E:nth-of-type(n)表示E父元素中的第n個字節(jié)點，且類型為E
E:nth-last-of-type(n) 表示E父元素中的第n個字節(jié)點，且類型為E，從后向前計算
E:empty 表示E元素中沒有字節(jié)點。注意：子節(jié)點包含文本節(jié)點，E:empty相當沒有內(nèi)容的空
標簽，一般沒有什么意義
注意
- 在js中數(shù)組是0開始計數(shù)，而在css3中是從1開始計數(shù)的
2.P:nth-of-type(2)與p:nth-child(2)是有區(qū)別的
P:nth-of-type(2) 找p標簽父級下的第二個p元素
例子
p:nth-child(2) 找p標簽父級下的第二個子元素，并且這個元素還是p標簽
例子
兩者等價
:first-child==:nth-child(1)
:last-child==:nth-last-child(1)
?
補充
transition:1s;是表示過渡的時間
例子
Js是這樣寫前綴
不同版本的瀏覽器而設(shè)置不同的前綴
屬性選擇器：
E[attr]只使用屬性名，但沒有確定任何屬性值
E[attr=”value”]指定屬性名，并指定了該屬性的屬性值
E[attr~=”value”]指定屬性名，并且具有屬性值，此屬性值是一個詞列表，并且以空格隔
開，其中詞列表中包含了一個value詞，而且等號前面的”~”不能不寫
E[attr^=”value”]指定了屬性名，并且有屬性值，屬性值是以value開頭的
屬性選擇器例子（指定所有的happy）
例子
屬性選擇器例子（指定leo的happy）
例子
屬性選擇器例子（指定old的happy）
例子
屬性選擇器例子（指定value開頭的happy）
例子
屬性選擇器(2)
E[attr$=”value”]指定了屬性名，并且有屬性值，而且屬性值是以value結(jié)束的
E[attr*=”value”]指定了屬性名，并且有屬性值，而且屬性值中包含了value
E[attr|=”value”]指定了屬性名，并且屬性值是value或者以”value-”開頭的值（比如說
zh-ch）
注意IE7及以上的支持
?
屬性選擇器例子（指定value結(jié)尾的詞的happy）
例子
屬性選擇器例子（指定value任何一個包含的詞的happy）
例子
屬性選擇器例子（指定value中的只有那個詞和后面帶的—的happy）（注意：只以b開頭的不可以）
例子
結(jié)構(gòu)偽類(1)
E:first-child 表示E元素中的第一個子節(jié)點
E:last-child 表示E元素中的最后一個子節(jié)點
E:first-of-type 表示E父元素中的第一個子節(jié)點且節(jié)點類型是E的
E:last-of-type 表示E父元素中的最后一個子節(jié)點且節(jié)點類型是E的
E:only-child 表示E元素中只有一個子節(jié)點。注意：子節(jié)點不包含文本節(jié)點
E:only-of-type 表示E的父元素中只有一個子節(jié)點，且這個唯一的子節(jié)點的類型必須是E。
注意：子節(jié)點不包含文本節(jié)點
兩者等價
:first-of-type==nth-of-type(1)
:last-of-type==nth-last-of-type(1)
偽類(2)
E:target 表示當前的URL片段的元素類型，這個元素必須是E
E:disabled 表示不可點擊的表單控件
E:enabled 表示可點擊的表單控件
E:checked 表示已選中的checkbox或radio
E:first-line 表示E元素中的第一行
E:first-letter 表示E元素中的第一個字符
E::selection 表示E元素在用戶選中文字時
E::before 生成內(nèi)容在E元素前
偽類（3）
E::after生成內(nèi)容在E元素后
E:not(s)表示E元素不被匹配
E~F表示E元素毗鄰的F元素
Content屬性?
E：target;相當瞄點，把隱藏的相對應(yīng)顯示出來
表單的input中的enabled和disabled(原來是設(shè)置表單的禁用或者啟用的字體顏色或別的)
例子
表單的input:checked(原來是設(shè)置表單的按鈕勾選時變化位置或者別的)
例子
P~h1（p往后的元素）
<style>
P~h1{
Background:red;
}
</style>
<body>
<p>p</p>
<h1>h1</h1>
<h1></h1>
</body>
例子
P:first-line/p:first-letter/p::selection/p:before/p:after(注意before和after都是為了在前面或后面加內(nèi)容—其中加了display:block;就會自己另起一行；還有p::selection不同瀏覽器兼容不同，所以需要加前綴)
例子
h1:not(.h2) 除去這個標簽：（其余標簽都設(shè)置背景顏色）
例子
注意
input中的radio的name需要統(tǒng)一
往后會繼續(xù)更新CSS3知識，謝謝大家閱讀本人的文章，都祝愿你們心想事成！
本文作者lilyping
越努力，越幸運
原文鏈接：http://www.itdecent.cn/u/3908e601f4ec
微信公眾號：BestLilyPing
github:https://github.com/lilyping
Demos源碼地址：https://github.com/lilyping
