第二章 選擇器
1柳沙、p.warning （沒有空格）其class屬性包含warning的p段落
區(qū)別于 p .warning 選擇p標簽下子元素包含class=“warning”的元素
2汛蝙、.warning.urgent{color:red}
選擇同時包含這些類名的元素起胰，順序可變 <div class="urgent warning"> 可以被選擇
3轩拨、屬性選擇器
h1[class]{} ?選擇包含class屬性（值不限）的h1元素
*[title]{} ?包含title屬性的所有元素
a[href][title] ?同時具有href和title屬性的a標簽
planet[moons="1"] 根據(jù)屬性值選擇
<div class="p1 p2">
div[class="p1 p2"] 選擇以上div元素谓传，中間要有空格荧飞，順序必須相同烙无。僅使用div[class="p1"]不能選擇該元素毫捣，要求完全匹配
根據(jù)部分屬性選擇
p[class~="p1"] 選擇class帶有p1值的元素
子串匹配屬性選擇器
[foo^="bar"] ? ?選擇foo屬性以bar開頭的所有元素
[foo$="bat"]? ? 選擇foo屬性以bar結(jié)尾的所有元素
[foo*="bar"] ? ?包含foo子串bar的所有元素
特定屬性
*[lang|="en"]選擇lang屬性等于en或以en-開頭的所有元素
子選擇器`h1 > strong`選擇了h1元素的直接子元素 详拙，即樹中直接相連的元素
選擇相鄰兄弟元素
h1+p{color:red} ?緊連在h1元素后的所有p元素，p元素要與h1元素有共同的父元素
偽類和偽元素
鏈接偽類：
a:link{} 用于未訪問的鏈接 并忽略沒有href屬性的a標簽
a:visited{ } 用于訪問過的標簽
動態(tài)偽類：
：focus 指示當前具有輸入焦點的 元素
：hover 指示鼠標指針停留在哪個元素上
：active 指示被用戶輸入激活的元素 例如鼠標指針停留在一個超鏈接上蔓同，如果用戶點擊鼠標饶辙，就會激活這個超鏈接，：active將指示這個超鏈接
常見情況a
a:link{color：navy}
a:visited{ color：gray}
a:hover{ color:red}
a:active{color:yellow}
偽類的順序按照link-visited-focus-hover-active?
選擇第一個元素子元素 ? ?:first-child
The:first-child?represents any element that is the first child element of its parent.
選取其父元素的第一個子元素
<div>
? ? <p>hello</p>
</div>
p:first-child{font-weight:bold} hello變粗
這個不是選擇p元素的第一個子元素
偽元素選擇器
p:first-letter{} 一個塊級元素首字母的樣式
p:first-line{} 元素第一行
注意：所有偽元素必須出現(xiàn)在該偽元素選擇器的最后面斑粱。因此p:first-line em是不合法的
設置之前之后元素的樣式
可以用于插入生成的內(nèi)容弃揽，并設置其樣式，要在一個元素后面插入內(nèi)容，可以使用元素after
body:after{ content:"the End"}
