關於css中選擇器的小概括（一）

關於css中選擇器的小概括

1、基本選擇器

基本選擇器是咱們日常用到的最多的也是最便捷的選擇器，其中有元素選擇器（相似於a，div，body，ul），類選擇器（咱們在HTML標籤裏面爲其添加的class），ID選擇器（與類選擇器相似），廣泛選擇器（*），而且選擇器（相似「p.one#first」的寫法）和並列選擇器（相似「p,.one,#first」的寫法）

1.元素選擇器

範例：

<p>你好，css</p>
<div>你好，css</div>

css：

div{
            border:1px solid #ededed;
            background-color: lightblue;
        }

只有div標籤的內容樣式發生改變

2.類選擇器

範例：

<p class="one">你好，css</p>
<p class="two">你好，css1</p>

css：

.one{
            border:1px solid #ededed;
            background-color: lightblue;
        }

只有class爲「one」的p標籤樣式發生改變

3.ID選擇器

範例：

<p id="first">你好，css</p>
<p id="second">你好，css</p>

css：

#first{
            border:1px solid #ededed;
            background-color: lightblue;
        }

只有ID爲「first」的p標籤樣式發生改變

4.廣泛選擇器

範例：

<p>你好，css</p>
<div>你好，css</div>

css：

*{
            border:1px solid #ededed;
            background-color: lightblue;
        }

全部標籤內的樣式都發生改變

5.而且選擇器

範例：

<p class="one" id="first">你好，css</p>
<p class="one">你好，css</p>
<p id="first">你好，css</p>

css：

p.one#first{
            border:1px solid #ededed;
            background-color: lightblue;
        }

只有ID爲「first」且同時class爲「one」的p標籤樣式發生改變

6.並列選擇器

範例：

<p>你好，css</p>
<div class="one">你好，css</div>
<ul id="first">你好，css</ul>

css：

p,.one,#first{
            border:1px solid #ededed;
            background-color: lightblue;
        }

p標籤，class爲「one」的標籤和ID爲「first」的標籤樣式都發生改變

2、層次選擇器

層次選擇器通常用於選擇網頁中某一個標籤中子類衆多的狀況，在這個時候爲每個標籤都加上class或者是ID不太現實，可是不加又難以選擇須要添加樣式的標籤，此時層次選擇器尤其合適。

1.後代選擇器（可被後代繼承）

範例：

<div class="content">
        <p>你好，css</p>
        <hr>
        <ul>
            <li>one</li>
            <li>two</li>
            <li>three</li>
        </ul>
</div>

css：

.content{
    border:1px solid #ededed;
    background-color: lightblue;
}

class爲content的div標籤裏面全部的子代及孫代樣式都發生改變

2.子代選擇器（最直接的子代，不能被孫輩元素繼承）

範例：

<div class="content">
        <p>你好，css</p>
        <hr>
        <ul>
            <li>one</li>
            <li>two</li>
            <li>three</li>
        </ul>
</div>

css：

.content > li{
    border:1px solid #ededed;
    background-color: lightblue;
}

class爲content的div標籤裏面全部的子代（只有子代，不含孫代）樣式都發生改變

3.下一個兄弟選擇器

範例：

<div>
        <ul>
            <li>one</li>
            <li>two</li>
            <li>three</li>
        </ul>
        <ol>
            <li>one</li>
            <li>two</li>
            <li>three</li>
        </ol>
        <dl>
            <li>one</li>
            <li>two</li>
            <li>three</li>
        </dl>
        
</div>

css：

ul + ol{
    border:1px solid #ededed;
    background-color: lightblue;
}

ul及ol標籤內容的樣式發生改變，可是dl內容樣未改變

4.以後全部兄弟選擇器

範例：

<div>
        <ul>
            <li>one</li>
            <li>two</li>
            <li>three</li>
        </ul>
        <ol>
            <li>one</li>
            <li>two</li>
            <li>three</li>
        </ol>
        <dl>
            <li>one</li>
            <li>two</li>
            <li>three</li>
        </dl>
        
</div>

css：

ul ~ dl{
    border:1px solid #ededed;
    background-color: lightblue;
}

從ul到dl全部內容的樣式都發生了改變（未完，待總結...）