重溫系列6《css 複雜選擇器》

2021-10-06 12:17:31 字數 1688 閱讀 9350

1.css的註解 ：

/*


我是css的註解樣式，在兩星號後面


*/
2.父子選擇器：父父級元素 父級元素 子元素 子子級元素 ：

下面是父子結構的html的結構

下面是css的程式碼：

.fathe***ther .father .son .sonson


.fathe***ther .father .son


.fathe***ther .father


.fathe***ther
然後你會得到這個圖畫：

以上是比較傳統的寫法。但是通常情況頁面結構是這樣的：

這的css選擇器可以這樣寫，我需要選中所有的span標籤。如下程式碼：三個span標籤全部被選中了。

div span
3.直接子元素選擇器，下圖結構，我想選中第乙個span標籤。需要用乙個 > 號表示。

css程式碼如下：

div > span
這樣操作2號與3號span標籤將不會被選中。

4.並列選擇器，例如標籤名 .class值，例如：我要選擇第三行的div標籤。

css的程式碼如下：我用的並列選擇器 div .three 。

div .three
5.分組選擇器，就是同時選擇中多個標籤一起設定：

現在同時設定div span strong三個標籤。就是把標籤用逗號隔開，疊在一起寫。最後乙個標籤元素不要逗號。

div,


span,


strong
6.權重計算，複雜選擇器一般同時會選中多個標籤，這個時候就會涉及權重的計算。

如上的（括號裡面的就是權重值，每乙個權重高階下乙個權重是256進製）。

如果權重相等，那麼誰在後面就執行誰，也就是說後面會覆蓋前面的效果（必需是css的相同屬性）。舉例：

我同時給第三行的div進行css的樣式。如下css的程式碼，兩個程式碼的權重一樣。

都是：標籤的權重+class的權重=20，所以執行的效果是紅色。

div .three1


div .three2

6 CSS 屬性選擇器

對帶有指定屬性的 html 元素設定樣式。可以為擁有指定屬性的 html 元素設定樣式，而不僅限於 class 和 id 屬性。注釋 只有在規定了 doctype 時，ie7 和 ie8 才支援屬性選擇器。在 ie6 及更低的版本中，不支援屬性選擇。屬性選擇器 下面的例子為帶有 title 屬性的所...

6 CSS屬性選擇器

屬性選擇器 利用標籤的屬性對樣式的生效物件進行選擇。我們在基本選擇器中學過class選擇器和id選擇器，它們也是標籤中的屬性，只是因為這兩個使用頻率很高，因此把它們抽離出來作為兩種獨立的選擇器。我們如果想利用其他系統自帶的屬性去選擇樣式的生效物件，那麼就使用屬性選擇器。格式一 基本選擇器 屬性 意義...

複雜的CSS選擇器

一.基本的css選擇器 1.萬用字元 例 2.類別選擇器 例 container 3.id選擇器 例 div1 4.群組選擇器 例 span,class,id 5.並列選擇器 例 div.class 6.子代選擇器 例 div span 7.直接子代選擇器 例 div span 二.複雜的css選擇...