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

1.CSS的註解 ：

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

2.父子選擇器：父父級元素 父級元素 子元素 子子級元素 { 括號裏面為css的樣式 }：
下面是父子結構的html的結構

下面是CSS的代碼：

.fatherfather .father .son .sonson{
    background-color: black;
    width: 300px;
    height: 300px;
}
.fatherfather .father .son{
    background-color: red;
    width: 600px;
    height: 600px;
}
.fatherfather .father{
    background-color:green;
    width: 900px;
    height: 900px;
}
.fatherfather{
    background-color: blue;
    width: 1200px;
    height: 1200px;
}

然後你會得到這個圖畫：

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

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

div span{
    background-color: salmon;
}

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

CSS代碼如下：

div > span{
    background-color: seagreen;
}

這樣操作2號與3號span標籤將不會被選中。
4.並列選擇器，例如標籤名 .class值{css的樣式}，例如：我要選擇第三行的div標籤。

css的代碼如下：我用的並列選擇器 div .three {css樣式代碼}。

      div .three{
            background-color: aqua;
            
        }

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

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

   div,
   span,
   strong{
           background-color: aqua;
       }

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

如上的（括號裏面的就是權重值，每一個權重進階下一個權重是256進制）。

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

我同時給第三行的div進行css的樣式。如下css的代碼，兩個代碼的權重一樣。
都是：標籤的權重+class的權重=20，所以執行的效果是紅色。

     div .three1{
            background-color: aqua;

        }
        div .three2{
            background-color:red;

        }