css選擇器

時間 2019-11-30

標籤 css 選擇器欄目 CSS 简体版

原文原文鏈接

css以及css3都包含了很是多的選擇器，這些選擇器給咱們提供了極大的便利css

在這篇隨筆當中，入門階段的元素選擇器，id選擇器，class選擇器，羣組選擇器就不介紹了。這裏咱們要講的是css中的層次選擇器以及css3中的選擇器html

1、層次選擇器css3

1.後代選擇器：選擇元素內部中全部的某一個元素，包括子元素和其餘後代元素瀏覽器

語法：M N{}字體

說明：在後代選擇器中，「M元素」和「N元素」之間用空格隔開，表示選中M元素內部後代N元素（全部N元素）。spa

2.子代選擇器：選中元素內部某一個子元素，該選擇器與後代選擇器有着明顯區別xml

（1）後代選擇器選取得是全部元素htm

（2）子代選擇器選取得是內部某一類子元素（僅限子元素，不包括子孫元素）blog

語法：M>N{}get

3.兄弟選擇器

語法：M~N{}

說明：選中M元素後面的某一類兄弟元素，記住，兄弟選擇器只選取後面的全部兄弟元素，不包括前面的全部兄弟元素

4.相鄰選擇器

語法：M+N{}

表示選擇M元素後面的某一個相鄰的兄弟元素N。

技巧：li+li{/*樣式代碼*/}

使用在相鄰選擇器，表示選擇li元素相鄰的下一個li元素，由於最後一個li元素沒有相鄰的下一個li元素。因此對於最後一個li元素，沒有下一個li元素能夠選取

例如：li+li{border-top：2px soild red；}能夠達到在兩個li元素之間添加一個單邊框的效果

2、CSS3選擇器

（1）結構僞類選擇器

1.第一類結構僞類選擇器：（子元素選擇器）

E:first-child 選擇父元素的第一個子元素

E:last-child 選擇父元素的最後一個子元素

E:nth-child（n）選擇父元素的第n個子元素或奇偶元素，n的取值爲整數或者odd/even

E:only-child 選擇父元素下的惟一個子元素（只有在父元素只有一個子元素的狀況下才能使用）

以上的E是子元素，須要在前面添加父元素例如：ul li：first-child{/*css代碼*/}，第一類結構僞類選擇器特別適合與設置列表的列表項的不一樣樣式，還有表格，列表中的隔行換色。

eg：

<div>
    <h1></h1>
    <p></p>
    <span></span>
    <span></span>
</div>

h1:first-child：選擇的是h1，由於h1是div的第一個子元素

p：first-child:選擇不到任何元素，由於p不是div的第一個子元素

2.第二類結構僞類選擇器：（同級兄弟元素選擇器）

E:first-of-type 選擇同元素類型的第一個同級兄弟元素

E:last-of-type 選擇同元素類型的最後一個同級兄弟元素

E:nth-of--type(n) 選擇同元素類型的第n個或奇偶同級兄弟元素

E:only-of-type 匹配父元素中特定類型的惟一子元素（該父元素能夠有多個子元素）

<div>
    <h1></h1>
    <p></p>
    <span></span>
    <span></span>
</div>

h1:first-of-type:選擇的是h1，由於h1元素是全部h1元素裏的第一個h1元素，並且也只有h1元素

p：first-of-type：選擇的是p，由於p元素是全部p元素裏的第一個p元素，並且也只有p元素

*因此，在經過第一類和第二類的比較後，咱們能夠發現，第一類結構僞類選擇器是選擇父元素下的第一個子元素（不區分元素類型），而第二類結構僞類選擇器則是選擇特定類型的元素的第一個元素（區分元素類型）

3.第三類結構僞類選擇器：

1. :root 選擇頁面的根元素，也就是html元素

2. E:not() 選擇括號內元素以外的全部元素

3. E:empty 選擇一個不包含任何子元素和內容的元素

用法：這個選擇器很是的實用，咱們能夠經過這個選擇器來控制一些內容爲空的表格單元格的樣式

4. E:target 選取頁面中某個target元素

*所謂的target元素，就是指id被當作頁面內的超連接的元素

eg：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head> 
    <title>CSS3 :target選擇器</title>
    <style type="text/css">
        :target h3
        {
            color:red;
        }
    </style>
</head>
<body>
    <div>
        <a href="#music">推薦音樂</a><br />
        <a href="#movie">推薦電影</a><br />
        <a href="#article">推薦文章</a><br />
    </div>
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    <div id="music">
        <h3>推薦音樂</h3>
        <ul>
            <li>林俊杰-被風吹過的下圖</li>
            <li>曲婉婷-在個人歌聲裏</li>
            <li>許嵩-灰色頭像</li>
        </ul>
    </div>
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    <div id="movie">
        <h3>推薦電影</h3>
        <ul>
            <li>蜘蛛俠系列</li>
            <li>鋼鐵俠系統</li>
            <li>復仇者聯盟</li>
        </ul>
    </div>
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    <div id="article">
        <h3>推薦文章</h3>
        <ul>
            <li>朱自清-荷塘月色</li>
            <li>余光中-鄉愁</li>
            <li>魯迅-阿Q正傳</li>
        </ul>
    </div>
</body>
</html>

　　其中，#表示返回頂部，#加id名，則表示返回至該頁面的id所在地，也就是咱們常說的錨點連接

target選擇器裏的樣式，只有當連接被點擊的時候纔會被顯示出來

（2）屬性選擇器

所謂屬性選擇器，就是經過屬性來選擇元素

1.E[attr^="屬性值"]

選取了屬性以雙引號內屬性值開頭的元素

2.E[attr$="屬性值"]

選取了屬性以雙引號內屬性值結尾的元素

3.E[attr*=「屬性值」]

選取了屬性包含了雙引號內屬性值的元素

（3）UI元素狀態僞類選擇器

什麼叫作UI元素狀態：UI元素狀態包括可用，不可用，失去焦點，得到焦點，選中，未選中