最詳細的css3選擇器解析 選擇器是什麼? 比較官方的解釋:在 CSS 中,選擇器是一種模式,用於選擇需要添加樣式的元素。 最常見的 CSS 選擇器是元素選擇器。換句話說,文檔的元素就是最基本的選擇器。 看代碼,元素選擇器就是這個: h1作為一個元素標簽,是最基本的選擇器,這樣可以對h1標簽設置屬性 ...
最詳細的css3選擇器解析
選擇器是什麼?
比較官方的解釋:在 CSS 中,選擇器是一種模式,用於選擇需要添加樣式的元素。
最常見的 CSS 選擇器是元素選擇器。換句話說,文檔的元素就是最基本的選擇器。
看代碼,元素選擇器就是這個:
h1作為一個元素標簽,是最基本的選擇器,這樣可以對h1標簽設置屬性。
選擇器有哪些?
常見的選擇器:元素選擇器,類選擇器,ID選擇器,屬性選擇器,派生選擇器。
本文的思路就是先講講最常用的選擇器,再講講用得比較少的選擇器。
如果你覺得能學到不少知識,點個關註哦,精彩美文第一時間為你奉上。
選擇器-元素選擇器
元素選擇器,最常用的選擇器之一,常用於html標簽,p標簽,h1-h6標簽等的樣式設定。具體怎麼用就不詳細介紹了,
上面開頭已經舉例說明瞭。在 W3C 標準中,元素選擇器又稱為類型選擇器(type selector)。“類型選擇器匹配文檔語言
元素類型的名稱。類型選擇器匹配文檔樹中該元素類型的每一個實例。”
選擇器-類選擇器
類選擇器與元素選擇器看起來很類似,但是還是有一些區別。類選擇器允許以一種獨立於文檔元素的方式來指定樣式。
該選擇器可以單獨使用,也可以與其他元素結合使用。
提示:只有適當地標記文檔後才能使用這些選擇器,所以使用這種選擇器通常需要先做一些構想和計劃。要應用樣式而不考
慮具體設計的元素,最常用的方法就是使用類選擇器。類選擇器怎麼用,如下圖:
圖中的body標簽裡面,有一個div,div有一個class屬性,這就是所謂的類,但是這個類不同於java語言的類。然後我們
需要對這個div設置一些樣式,看style裡面,.select這個就是類選擇器了,類選擇器需要配合標簽的class屬性一起使用。
類選擇器可以結合元素選擇器來使用。這種選擇器稱為結合元素選擇器。
這裡就將與類選擇器相關的選擇器詳細介紹一下。
例如:
選擇器會匹配class屬性包含select的所有p標簽,所以選擇器p.select解釋為:“其class屬性值為select的所有段落”。
還有一個多類選擇器。怎麼用呢?看下麵
具體是什麼意思呢?就是說:本來我的一個select的樣式是夠用的,但是突然加了需求,需要再加一個字體的大小,
但是只想P標簽使用,並且select又不是一個標簽在使用,waring也不是只有一個P標簽使用,這時候,多類選擇器就出
現了,其實標簽的style屬性也可以,但是不推薦這麼乾。使用多類選擇器之後,這個標簽就同時結合了這兩個選擇器里
面的樣式屬性。class裡面的類的先後順序沒關係。
選擇器-ID選擇器
在某些方面,ID選擇器類似於類選擇器,但是也有一些重要的區別。語法:類選擇器是在名稱前面加一個. ID選擇
器在前面加上一個#
用法:類選擇器可以多次使用,ID選擇器只能使用在一個元素標簽上面,並且只能使用一次,不能重覆使用(在一個
文檔裡面),原因是在一個文檔裡面,ID是唯一的。
示例:
這樣就為ID為test的標簽h1設置了字體顏色屬性
註意事項:
- ID選擇器在一個文檔中只能使用一次
- 不能使用ID詞列表(意思是不能使用類選擇器那樣的結合,因為id屬性不允許有一空格分隔的詞列表)
- 一般情況下ID選擇器與類選擇器都是區分大小寫的。
選擇器-屬性選擇器
屬性選擇器相對上面兩種選擇器來說用得比較少,也很簡單,來看看吧。
屬性選擇器可以根據元素的屬性以及屬性值來選擇元素。
-
簡單屬性選擇
如果希望選擇有某個屬性的的元素,而不論屬性值是什麼,可以使用簡單屬性選擇器如:
意思就是說將所有帶有href屬性的元素設置字體屬性為“微軟雅黑”
*{ font-size:12px; }
這是通配符選擇器,css系列第一篇有說明!
示例中,*可以換成標簽名,如
意思是設置所有的name屬性的input標簽的字體大小為20px。
-
根據具體屬性值選擇
除了選擇擁有某些屬性的元素外,還可以選擇某些擁有特定屬性值的元素。
示例
意思是選擇input標簽中,name屬性為username的input標簽,再為它設置樣式。
-
屬性與屬性值完全匹配
屬性與屬性值完全匹配與上面的根據具體值屬性有什麼區別呢?還記得我們之前在類選擇器裡面講解的多類選擇器吧。
當我們要選擇這類標簽的時候,就需要屬性與屬性值完全匹配了,當然這隻是一個示例。
這裡面,如果我們用這個選擇器來代替是否可行?
答案是不行的,這時候我們需要知道屬性與屬性值完全匹配了,看看下麵
這樣就可以精準的找到這個p標簽了,並且可以為他設置一些樣式,其實這樣看,你是不是覺得這個沒有什麼用?
其實這是有實際作用的,比如說在動態改變這個元素的樣式,是很方便的。
屬性選擇器這一塊還有一些需要瞭解的,但是不是很常用,這裡就只解釋一下怎麼個用法就行了。
選擇器 | 描述 |
---|---|
[attribute] | 用於選取帶有指定屬性的元素。 |
[attribute=value] | 用於選取帶有指定屬性和值的元素。 |
[attribute~=value] | 用於選取屬性值中包含指定辭彙的元素。 |
[attribute|=value] | 用於選取帶有以指定值開頭的屬性值的元素,該值必須是整個單詞。 |
[attribute^=value] | 匹配屬性值以指定值開頭的每個元素。 |
[attribute$=value] | 匹配屬性值以指定值結尾的每個元素。 |
[attribute*=value] | 匹配屬性值中包含指定值的每個元素。 |
選擇器-後代選擇器
後代選擇器又稱為包含選擇器,後代選擇器可以選擇作為某元素後代的元素
-
根據上下文選擇元素
以上代碼的意思是選擇test裡面的所有的p標簽,然後將他們的背景顏色改成紅色。是不是很簡單,效率高。
如果你一個一個的設置p標簽也是可以的,但是效率太低了,人工效率哈。
選擇器-子元素選擇器
子元素選擇器與後代選擇器相比,子元素選擇器只能選擇作為元素子元素的元素
這裡的代碼,就只能將class為test裡面的子元素h1的背景變成紅色,class為test2,以及class為test1
裡面的都不是class為test的子元素,這一點要註意。
- 結合後代選擇器和子選擇器
後代選擇器還可以與子選擇器共同使用這樣的效果是在h1下麵的a標簽的下劃線會被取消掉
選擇器-相鄰兄弟選擇器
如果需要選擇緊接在另一個元素後的元素,而二者有相同的元素,可以使用相鄰兄弟選擇器。
示例:
這個選擇器讀作“選擇緊接在div1後面的h1標簽,並且是一個”,這個選擇器也一樣,可以和前面的子元素選擇器一起使用。
偽類css偽類是用於向某些選擇器添加特殊的效果。什麼意思呢?看看代碼你就知道了。
這段代碼是說當滑鼠移動到p標簽的時候,給p標簽添加一些樣式。類似的還有很多。
a:link {color: #FF0000} /* 未訪問的鏈接 */ a:visited {color: #00FF00} /* 已訪問的鏈接 */ a:hover {color: #FF00FF} /* 滑鼠移動到鏈接上 */ a:active {color: #0000FF} /* 選定的鏈接 */
具體的用法視情況而定。
這期的選擇器筆記就到這裡了,如果你覺得不錯,請關註我哦!
掃描二維碼 獲取更多精彩
點“在看”你懂得