css選擇器知識點有哪些

這篇文章主要為大家展示了“css選擇器知識點有哪些”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“css選擇器知識點有哪些”這篇文章吧。

選擇器的種類可以分為三種：標簽名選擇器、類選擇器，ID選擇器。而所謂的后代選擇器和群組選擇器只不過是對前三種選擇器的擴展應用。

CSS選擇器效率從高到低的排序如下：

1.id選擇器（#myid）

2.類選擇器（.myclassname）

3.標簽選擇器（div,h2,p）

4.相鄰選擇器（h2+p）

5.子選擇器（ul > li）

6.后代選擇器（li a）

7.通配符選擇器（*）

8.屬性選擇器（a[rel="external"]）

9.偽類選擇器（a:hover, li:nth-child）

一般而言，選擇器越特殊，它的優先級越高。也就是選擇器指向的越準確，它的優先級就越高。

對于什么情況下使用什么選擇器，用不同選擇器的原則是：

1、準確的選到要控制的標簽；

2、使用最合理優先級的選擇器；

3、HTML和CSS代碼盡量簡潔美觀。通常：

①最常用的選擇器是類選擇器。

②li、td、dd等經常大量連續出現，并且樣式相同或者相類似的標簽，我們采用類選擇器跟標簽名選擇器結合的后代選擇器 .xx li/td/dd {} 的方式選擇。

③極少的情況下會用ID選擇器，當然很多前端開發人員喜歡header，footer，banner，conntent設置成ID選擇器的，因為相同的樣式在一個頁面里不可能有第二次。

我們的目標是高效，簡介的css

所謂高效的CSS就是讓瀏覽器在查找style匹配的元素的時候盡量進行少的查找，其實瀏覽器CSS匹配不是從左到右進行查找，而是從右到左進行查找。比如 DIV#divBox p span.red{color:red;}，瀏覽器的查找順序如下：

先查找html中所有class='red'的span元素，找到后，再查找其父輩元素中是否有p元素，再判斷p的父元素中是否有id為divBox的div元素，如果都存在則匹配上。瀏覽器從右到左進行查找的好處是為了盡早過濾掉一些無關的樣式規則和元素。

下面列出一些我們常見的寫CSS犯一些低效錯誤：

1.盡量不要在ID選擇器和class選擇器前使用標簽名

eg：

<div id="box">

<span class=“eg”>選擇器舉例</span>

</div>

<style>

div#box{...} /*一般寫法*/

#box{...} /*更簡便的寫法*/

span .eg{...} /*一般寫法*/

.eg{...} /*更簡便的寫法*/

</style>

注：但是當你的頁面中定義了多個叫eg的類時，需要有層級的寫法。

2.盡量少使用層級關系

一般寫法：#divBox p .red{color:red;}

更好寫法：.red{..}

3.使用class代替層級關系

一般寫法：#divBox ul li a{display:block;}

更好寫法：.block{display:block;}

以上是“css選擇器知識點有哪些”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！