首先,什么是選擇器?選擇器就是通過標簽選擇一類元素進行控制,常用於HTML等語言中。
css中的選擇器種類有很多,下面介紹的是幾種常見的基本選擇器:通配符選擇器,類選擇器,ID選擇器,標簽選擇器,后代選擇器,子代選擇器,屬性選擇器。
當多個選擇器同時對同一塊內容進行編輯時使用那種選擇器呢?這就引出了另一個概念:權重。權重越高,樣式就會被優先使用。
<!--權重,權值: 行內1000 ID100 class10 標簽1 -->
- 通配符選擇器,用“ * ”來表示,用來選中所有元素,但在企業開發中一般不會使用通配符選擇器,而有些表單、新聞詳情這類簡單、干凈、一致的頁面會有全局設置,目的就是看起來簡潔、整齊。
2.類選擇器,用“ . ”來表示,用來獨立規范HTML中的一類元素,該選擇器可以單獨使用,也可以與其他元素結合使用,是比較常用的選擇器之一。
單獨使用時:如果你想讓aaa類元素的背景為粉紅色,你就可以這樣設置:
和其它元素結合使用: p.important 解釋為:“其 class 屬性值為 important 的所有段落”。 但如果此段落中有一個h1元素,因為h1 元素不是段落,這個規則的選擇器就與之不匹配,因此 h1 元素不會變成紅色文本。
3.ID選擇器,用“ # ”表示,id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式。
ID選擇器有以下幾點需要注意:
一. ID,就像你的QQ號一樣,是唯一的,每個ID選擇器的名不能重復,但是class類名可以重復。
二. id選擇器不能像類選擇器一樣多個合並使用,一個元素只能命名一個id名。
三. 可以在不同文檔中使用同一個ID名,但前提是每個文檔中不能有重復的ID名。
4.標簽選擇器,標簽選擇器又叫元素選擇器:文檔的元素就是最基本的選擇器。
例如:使li標簽的字體顏色變為紅色。
5.后代選擇器,注意與子代選擇器區分,兩者非常類似。
就好像是一個輩分問題,給類名為nav元素里的a元素設定格式
6.子代選擇器,給類名為nav元素里符合子元素的a元素設定格式。
7.可以為擁有指定屬性的 HTML 元素設置樣式;屬性選擇器通過 []
來定義,[]
內部為元素的屬性。
id和類本質上就是精確屬性值選擇器,