CSS常用的選擇器學習

簡介

最近工作中常常會與前端頁面交互，掌握一定的前端知識還是必要的，而入門需要了解一下CSS選擇器非常有必要。

基本CSS選擇器

1. 元素選擇器

元素選擇器就是標籤選擇器，作用是選中頁面中所有相同的標籤元素

• html

<div>
    <p>
        <span>我是p標籤中的span</span>
    </p>
    <span>我是div中的span</span>
</div>

• css

    span {
        color: red;
    }

運行效果如下：可以看到所有的span元素的顏色都爲紅色的。

2. id選擇器
通過id選中唯一確認的值，id的值不可重複如果重複編輯器會有重複的告警提示。

• html

<div id="div1">
    <p>
        <span id="span1">我是p標籤中的span</span>
    </p>
    <p id="p1">我是div中的span</p>
    <p>如果你的才華還實現不了你的野心</p>
    <p>那就靜下心來，埋頭苦幹。</p>
    <p>有志者事竟成破釜成舟百二秦關終屬楚</p>
    <p>苦心人天不負臥薪嚐膽三千越甲可吞吳！</p>
</div>

• css

    #p1 {
        color: limegreen;
    }

運行效果如下：可以看到id爲span1的元素設置爲淺綠色了。

3. 類選擇器
與元素id不可重複不同，多個元素可以有相同的類屬性，通過類選擇器可以選擇一組元素。

• html

<div id="div1">
    <p>
        <span id="span1">我是p標籤中的span</span>
    </p>
    <p id="p1">我是div中的span</p>
    <p>如果你的才華還實現不了你的野心</p>
    <p>那就靜下心來，埋頭苦幹。</p>
    <p>有志者事竟成破釜成舟百二秦關終屬楚</p>
    <p>苦心人天不負臥薪嚐膽三千越甲可吞吳！</p>
</div>

• css

    #p1 {
        color: limegreen;
    }
    .text {
        color:gold;
    }

運行效果如下：可以看到class屬性值爲text的p元素標籤顏色爲金黃色。

4. 選擇器分組
通過選擇器分組可以選中多個元素選擇器爲每一個對應的選擇器進行設置

• html

<div id="div1">
    <p>
        <span id="span1">我是p標籤中的span</span>
    </p>
    <p id="p1">我是div中的span</p>
    <p class="text">如果你的才華還實現不了你的野心</p>
    <p class="text">那就靜下心來，埋頭苦幹。</p>
    <p class="text">有志者事竟成破釜成舟百二秦關終屬楚</p>
    <p class="text">苦心人天不負臥薪嚐膽三千越甲可吞吳！</p>
    <h1>我是h1標籤裏面的文字</h1>
</div>

• css

  #p1,h1 {
      background-color: aqua;
  }

運行效果如下所示：可以看到id爲p1的元素，與h1元素進行設值。

5. 複合選擇器
選中滿足多個選擇器的元素，即每一個滿足每一個選擇器的元素

• html

<div id="div1">
    <p>
        <span id="span1">我是p標籤中的span</span>
    </p>
    <p id="p1">我是div中的span</p>
    <p class="text">如果你的才華還實現不了你的野心</p>
    <p class="text">那就靜下心來，埋頭苦幹。</p>
    <p class="text">有志者事竟成破釜成舟百二秦關終屬楚</p>
    <p class="text">苦心人天不負臥薪嚐膽三千越甲可吞吳！</p>
    <h1>我是h1標籤裏面的文字</h1>
    </br>
    <span class="sp1">我是div中的span</span>
</div>
<p class="sp1">我是body裏的p元素</p>

• css

span.sp1 {
    background-color: red;
}

效果如下所示：可以看到只有滿足是span元素且class屬性爲sp1的元素背景爲紅色，而class爲sp1的p元素沒有任何變化。

元素關係

瞭解進階選擇器之前，需要知道html元素之間的關係

• 父元素
  包含子元素的標籤元素稱爲子元素的父元素,下面p標籤就直接包含了子元素span

    <p>
        <span>我是p標籤中的span</span>
    </p>

• 子元素
  被父元素直接包含的子元素，上面span元素既是p元素的子元素
• 祖先元素
  直接或者間接包含子元素的元素被稱爲祖先元素，父元素也是祖先元素。如下所示：div元素即爲所有span元素的祖先元素。

<div>
    <p>
        <span>我是p標籤中的span</span>
    </p>
    <span>我是div中的span</span>
</div>

• 後代元素
  直接或者直接被父元素包含的元素即爲後代元素，子元素也是後代元素。如上所示：span即爲div的後代元素。
• 兄弟元素
  擁有相同的父元素即爲兄弟元素，如下圖所示：
  

選擇器進階

1. 後代元素選擇器
   一般選中某個祖先元素下的所有後代元素

• html

<div id="div1">
    <p>
        <span id="span1">我是p標籤中的span</span>
    </p>
    <p id="p1">我是div中的span</p>
    <p class="text">如果你的才華還實現不了你的野心</p>
    <p class="text">那就靜下心來，埋頭苦幹。</p>
    <p class="text">有志者事竟成破釜成舟百二秦關終屬楚</p>
    <p class="text">苦心人天不負臥薪嚐膽三千越甲可吞吳！</p>
    <h1>我是h1標籤裏面的文字</h1>
    </br>
    <span class="sp1">我是div中的span</span>
</div>
<p class="sp1">我是body裏的p元素</p>

• css

div span {
    background-color: brown;
    font-size: 20px;
}

實現效果如下所示：div下所有的span元素背景顏色都發生變化。

2. 父子元素選擇器
選中父元素下的子元素

• html

<div id="div1">
    <p>
        <span id="span1">我是p標籤中的span</span>
    </p>
    <p id="p1">我是div中的span</p>
    <p class="text">如果你的才華還實現不了你的野心</p>
    <p class="text">那就靜下心來，埋頭苦幹。</p>
    <p class="text">有志者事竟成破釜成舟百二秦關終屬楚</p>
    <p class="text">苦心人天不負臥薪嚐膽三千越甲可吞吳！</p>
    <h1>我是h1標籤裏面的文字</h1>
    </br>
    <span class="sp1">我是div1中的span</span>
</div>
<div id="div2">
    <span>我是div2中的span</span>
</div>
<p class="sp1">我是body裏的p元素</p>

• css

    #div2 span {
    background-color: coral;
    }
    #div1 > span {
        background-color: darkgreen;
    }

效果如下所示：div1的id 的div元素下的span元素設置爲綠色。

3. 相鄰元素選擇器
匹配指定元素後緊緊相連的兄弟元素，注意是後面相鄰的元素。

• html

<div id="div1">
    <p>
        <span id="span1">我是p標籤中的span</span>
    </p>
    <p id="p1">我是div中的span</p>
    <p class="text">如果你的才華還實現不了你的野心</p>
    <p class="text">那就靜下心來，埋頭苦幹。</p>
    <p class="text">有志者事竟成破釜成舟百二秦關終屬楚</p>
    <p class="text">苦心人天不負臥薪嚐膽三千越甲可吞吳！</p>
    <h1>我是h1標籤裏面的文字</h1>
    </br>
    <span class="sp1">我是div1中的span</span>
</div>
<div id="div2">
    <span>我是div2中的span</span>
    <p class="sp1">我是body裏的p元素</p>
</div>
<p id="sp1">我是body裏的p1元素</p>
<p id="sp2">我是body裏的p2元素</p>

• css

    div + p {
        background-color: darkgreen;
    }

效果如下圖所示：可以看到只有一個p標籤變綠色。

4. 通用選擇器
匹配的指定元素後的所有匹配的元素

• html

<div id="div1">
    <p>
        <span id="span1">我是p標籤中的span</span>
    </p>
    <p id="p1">我是div中的span</p>
    <p class="text">如果你的才華還實現不了你的野心</p>
    <p class="text">那就靜下心來，埋頭苦幹。</p>
    <p class="text">有志者事竟成破釜成舟百二秦關終屬楚</p>
    <p class="text">苦心人天不負臥薪嚐膽三千越甲可吞吳！</p>
    <h1>我是h1標籤裏面的文字</h1>
    </br>
    <span class="sp1">我是div1中的span</span>
</div>
<div id="div2">
    <span>我是div2中的span</span>
    <p class="sp1">我是body裏的p元素</p>
</div>
<p id="sp1">我是body裏的p1元素</p>
<p id="sp2">我是body裏的p2元素</p>

• css

    div ~ p {
        background-color: darkgreen;
    }

實現效果如下：可以看到緊隨div後的所有p元素背景顏色都爲綠色。

5. 屬性選擇器
根據元素的屬性值來選定指定元素

• html

<div id="div1">
    <p id="p1">我是div中的p</p>
    <p class="text" title="野心">如果你的才華還實現不了你的野心</p>
    <p class="text">那就靜下心來，埋頭苦幹。</p>
    <p class="text">有志者事竟成破釜成舟百二秦關終屬楚</p>
    <p class="text" title="苦心">苦心人天不負臥薪嚐膽三千越甲可吞吳！</p>
</div>

• css

p[title="野心"] {
    background-color: darkorange;
}

實現效果如下：可以看到title爲野心的標籤被選中並設置橘黃色

而屬性選擇器除了上面判斷屬性值等於某個值，常見還有以下用法

[attribute^=value] 選擇器匹配屬性值以指定值開頭的每個元素
[attribute$=value] 選擇器匹配屬性值以指定值結尾的每個元素
[attribute*=value] 選擇器匹配屬性值包含指定值的每個元素