CSS選擇器之基本選擇器總結

時間 2019-11-11

標籤 css 選擇器基本總結欄目 CSS 简体版

原文原文鏈接

1、元素選擇器（全部瀏覽器支持）

元素選擇器（標籤名選擇器）其實就是文檔的元素，如html,body,p,div等等，html

下面例子中選擇了span元素，並設置了字體顏色爲紅色。瀏覽器

<body>
    <p>這裏使用<span>標籤名選擇器</span>改變了樣式</p>
</body>

CSS：字體

span{
    color: red;
}

效果：spa

2、類選擇器

（全部瀏覽器都支持類選擇器，但多類選擇器（.className1.className2）不被ie6支持。）firefox

類選擇器根據類名來選擇，前面以」.」來標誌，使用類選擇器以前須要在html元素上定義類名，類名自定義。3d

<body>
    <div class="demo"></div>
</body>

CSScode

.demo{
    width: 150px;
    height: 150px;
    background:#0e0;
}

效果：htm

3、ID選擇器（全部瀏覽器都支持）

根據元素ID來選擇元素，具備惟一性。前面以」#」號來標誌。blog

<body>
    <div id="demo"></div>
</body>

CSS文檔

#demo{
    width: 150px;
    height: 150px;
    background:red;
}

效果：

4、後代選擇器( E F )（全部瀏覽器都支持）

後代選擇器也稱爲包含選擇器，用來選擇特定元素或元素組的後代，後代選擇器用兩個經常使用選擇器，中間加一個空格表示。

其中前面的經常使用選擇器選擇祖元素，後面的經常使用選擇器選擇子元素，樣式最終會應用於子元素中。

好比說:E F，前面E爲祖先元素，Ｆ爲後代元素。

所表達的意思就是選擇了Ｅ元素的全部後代Ｆ元素，這裏Ｆ不論是E元素的子元素或者是孫元素或者是更深層次的關係，都將被選中。

換句話說，不論Ｆ在Ｅ中有多少層關係，都將被選中。

<body>
    <div class="demo">
        <div class="one">
            <ul>
                <li>列表一</li>
            </ul>
            <p>這裏是一個段落</p>
        </div>
    </div>
</body>

CSS

.demo .one{
    color: red;
}

效果：

5、通配符選擇器（全部瀏覽器支持）

一、通用選擇器用*來表示，下例中表示全部的元素的字體大小都是12px；

*{
font-size: 12px;
}

二、通用選擇器還能夠和後代選擇器組合。

<body>
    <p>
        全部的文本都被定義成紅色<br>
        <span>全部的文本都被定義成紅色</span><br>
        <span>全部的文本都被定義成紅色</span><br>
        <span>全部的文本都被定義成紅色</span>
    </p>
</body>

CSS

p *{
color: red;
}

表示全部p元素後代的全部元素都應用這個樣式，注意，若p元素後沒有元素，則樣式沒有效果。

三、與後代選擇器的搭配容易出現瀏覽器不能解析的狀況。

<body>
    <p>
        <p>全部的<span>文本</span>都被定義成紅色</p>
        <span>此處沒有變色</span><br>
        <span>此處沒有變色</span>
    </p>
</body>

CSS

p *{
color: red;
}

效果：

6、子元素選擇器（IE6不支持）

請注意這個選擇器與後代選擇器的區別：

子選擇器（child selector）僅是指它的直接後代，或者你能夠理解爲做用於子元素的第一個後代。

然後代選擇器是做用於全部子後代元素。

後代選擇器經過空格來進行選擇，而子選擇器是經過「>」進行選擇

<body>
    <p id="links">
        <a href="#">連接一</a>
        <span><a href="#">連接二</a></span>
        <span><a href="#">連接三</a></span>
    </p>
</body>

CSS

#links a {color:red;}

#links > a {color:blue;}

效果：

7、羣組選擇器（全部瀏覽器都支持）

當幾個元素樣式屬性同樣時，能夠共同調用一個聲明，元素之間用逗號分隔。

<body>
    <p>這裏是一個段落!</p>
    <ul><li>列表</li></ul>
    <a href="#" class="demo1">連接一</a><br>
    <span class="demo2">文字文字！</span>
</body>

CSS

p,li{
color: blue;
}
.demo1,.demo2{
 color: red;
}

效果：

8、相鄰兄弟元素選擇器（E+F）（IE6不支持這個選擇器）

相鄰兄弟選擇器能夠選擇緊接在另外一元素後的元素，並且他們具備一個相同的父元素。

換句話說，EF兩元素具備一個相同的父元素，並且Ｆ元素在Ｅ元素後面，並且相鄰，這樣咱們就可使用相鄰兄弟元素選擇器來選擇Ｆ元素（選中的僅一個元素）。

<body>
    <ul>
        <li>列表一</li>
        <li class="active">列表二</li>
        <li>列表三</li>
        <li>列表四</li>
　　     <li>列表五</li>
     </ul>
</body>

CSS

.active+li{
    background: #0e0;
}

效果：

註釋：選擇了li.active後面相鄰的li元素，注意了和li.active後面相鄰的元素僅只有一個的。

9、通用兄弟選擇器（Ｅ〜Ｆ）（IE6不支持這個選擇器）

通用兄弟元素選擇器是CSS3新增長一種選擇器。

這種選擇器將選擇某元素後面的全部兄弟元素，他們也和相鄰兄弟元素相似，須要在同一個父元素之中。

換句話說，E和F元素是屬於同一父元素以內，而且F元素在Ｅ元素以後，那麼E ~ F 選擇器將選擇中全部Ｅ元素後面的Ｆ元素。

<body>
    <ul>
        <li>列表一</li>
        <li class="active">列表二</li>
        <li>列表三</li>
        <li>列表四</li>
        <li>列表五</li>
    </ul>
</body>