【CSS3】常用的選擇器-有解無憂

1.交集選擇器(緊挨著)

交集選擇器是由兩個選擇器直接連接構成的，其中第一個必須是標簽選擇器，第二個必須是類選擇器或者ID選擇器，這兩個選擇器之間不能有空格，必須連續書寫

p.txt{
    color:blue;
}

<p>恰是一江<span class="txt">春水1</span>向東流</p>    <!-- 不變藍 -->
<span class="txt">春水2</span>    <!-- 不變藍 -->
<p class="txt">春水3</p>    <!-- 變藍 -->

在這里插入圖片描述

2.并集選擇器(’,'相連)

并集選擇器是“，”相連，所選中的都會有同樣的樣式

h1,h2,h3,h4,h5,h6,.txt{
    color: red;
}

<h1>標題一</h1>
<h2>標題二</h2>
<h3>標題三</h3>
<h4>標題四</h4>
<h5>標題五</h5>
<h6>標題六</h6>
<div>
    <span class="txt">內容區域</span>
</div>

在這里插入圖片描述

3.兄弟選擇器(’+'相連)

兄弟選擇器可選擇緊接在另一元素后的元素，且二者有相同父元素，

p + span{
    color: steelblue;
}

<p>p 標簽</p>    <!-- 不變色 -->
<span>span 標簽</span>    <!-- 變藍 -->
<p>p 標簽</p>    <!-- 不變色 -->
<span>span 標簽</span>    <!-- 變藍 -->
<br>
<span>span 標簽</span>    <!-- 不變色 -->
<p>p 標簽</p>    <!-- 不變色 -->

在這里插入圖片描述

4.子元素選擇器(’>'相連)

子元素選擇器只能選擇作為某元素子元素的元素，

h1 > b {
    color:red;
}

<h1>This <b>is</b> <b>very</b> important</h1>
<h1>This <u>is <b>very</b></u> important</h1>

在這里插入圖片描述

5.后代選擇器(空格)

后代選擇器又稱包含選擇器，后代選擇器可以選擇作為某元素后代的元素，

div span h1 {
    color: red;
}

<div>
    <span>我是span標簽
        <h1>我是標題1</h1>
    </span>
    <h1>我是標題一</h1>
</div>

在這里插入圖片描述

6.通配符選擇器(’*’ 號)

通配符選擇器就是一個星號，可以選中頁面中的所有元素，但是其優先級是最低的
*{ }

7.標簽選擇器(標簽名)

標簽選擇器就是寫標簽名，就可以選擇到對應的元素，優先級僅高于通配符選擇器，
例如：div{ } p{ }

8.類選擇器(’.’ 小圓點)

類選擇器就是英文的小圓點+標簽中的class屬性值，優先級僅次與id選擇器，
例如：box{ } name{ }

9.id選擇器(’#’ 井號)

id選擇器就是#+標簽中的id的屬性值，其優先級是最高的，
例如：#sex{ } #bar{ }

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/4830.html

標籤：其他

上一篇：學習mockjs

下一篇：wordpress呼叫最新文章五種方法包括排除置頂文章