CSS選擇器的種類
- 標(biāo)簽選擇器
- 類選擇器
- id選擇器
- 并列選擇器
- 復(fù)合選擇器
- 后代選擇器
- 直接后代選擇器
- 相鄰兄弟選擇器
- 屬性選擇器
標(biāo)簽選擇器
如果存在<div></div>的標(biāo)簽煌集，可以通過在<style></style>中通過div{}設(shè)置這個(gè)標(biāo)簽的屬性嫁乘。
類選擇器
如果存在<div class="haha"></div> 可以通過.haha{}來設(shè)置這個(gè)標(biāo)簽的屬性。
id選擇器
如果存在<div id="haha"></div> 可以通過 #haha{}來設(shè)置這個(gè)標(biāo)簽的屬性脐雪。
并列選擇器
如果存在 <div id="haha" class="nihao"></div> 可以通過div,#haha,.nihao{}這個(gè)方式來設(shè)置這個(gè)標(biāo)簽的屬性莺掠。
復(fù)合選擇器
如果存在<div id="haha" class="nihao"></div>可以通過div.nihao{}來設(shè)置這個(gè)標(biāo)簽的屬性闲礼。
注意事項(xiàng)
這里的div和nihao之間是不能有空格的而且第一個(gè)標(biāo)簽必須是標(biāo)簽選擇器寡具。
后代選擇器
如果存在這樣的情況秤茅，那么就可以通過div p直接拿到div后代中的所有p標(biāo)簽，也就是那兩個(gè)p標(biāo)簽童叠，如果我這樣div span p就可以直接拿到span后代的那個(gè)p標(biāo)簽框喳。
<div>
<p></p>
<span>
<p></p>
</span>
</div>
注意事項(xiàng)
- 在div p之間必須有一個(gè)空格（一個(gè)以上的空格好像不行，本人還沒有測試）
直接后代選擇器
如果存在如下情況,那么可以使用div>p直接拿到p標(biāo)簽厦坛，但是這個(gè)是直接后代五垮，所以不會(huì)拿到span下面的p標(biāo)簽。
<div>
<p></p>
<span>
<p></p>
</span>
</div>
相鄰兄弟選擇器
如果存在這種情況杜秸，那么可以用div + p{}相鄰兄弟選擇器拿到div標(biāo)簽的相鄰標(biāo)簽p標(biāo)簽放仗，然后設(shè)置它的屬性。
<div>
<p></p>
<span>
<p></p>
</span>
</di>
<p></p>
屬性選擇器
如果存在如下情況,那么就可以通過div[name]{}拿到帶有name屬性的標(biāo)簽撬碟。也可以使用div[name][class]{}設(shè)置屬性中有name,class的標(biāo)簽诞挨，并設(shè)置屬性莉撇。還可以使用class=person單獨(dú)選擇出某一個(gè)標(biāo)簽。
<div name="jack"> </div>
<div name="rose"> </div>
<div name="lily" class="person"> </div>
偽類的學(xué)習(xí)
主要使用hover和foucs
hover:
當(dāng)鼠標(biāo)懸浮到元素上方是亭姥，添加樣式
foucs:
向擁有鍵盤輸入焦點(diǎn)的元素添加樣式
偽類是在css的樣式設(shè)置中使用的稼钩，例如div:hover{}顾稀，其中:和div之間不能有空格达罗，必須緊挨著，然后:和hover之間也不能有空格静秆。其余的可以參考w3cSchool網(wǎng)站粮揉。
