CSS系列：CSS3新增選擇器

時間 2019-11-10

標籤 css 系列 css3 新增選擇器欄目 CSS 简体版

原文原文鏈接

1. CSS1定義的選擇器

選擇器	類型	說明
E	類型選擇器	選擇指定類型的元素
E#id	ID選擇器	選擇匹配E的元素，且匹配元素的id爲「id」，E選擇符能夠省略。
E.class	類選擇器	選擇匹配E的元素，且匹配元素的class屬性值爲「class」，E選擇符能夠省略。
E F	包含選擇器	選擇匹配F的元素，且該元素被包含在匹配E的元素內。
E:link	連接僞類選擇器	選擇匹配E的元素，且匹配元素被定義了超連接並未被訪問。例：a:link
E:visited	連接僞類選擇器	選擇匹配E的元素，且匹配元素被定義了超連接並已被訪問。例：a:visited
E:active	用戶操做僞類選擇器	選擇匹配E的元素，且匹配元素被激活
E:hover	用戶操做僞類選擇器	選擇匹配E的元素，且匹配元素正被鼠標通過
E:focus	用戶操做僞類選擇器	選擇匹配E的元素，且匹配元素獲取了焦點
E::first-line	僞元素選擇器	選擇匹配E元素內的第一行文本
E::first-letter	僞元素選擇器	選擇匹配E元素內的第一個字符

2. CSS2定義的選擇器

選擇器	類型	說明
*	通配選擇器	選擇文檔中全部元素
E[foo]	屬性選擇器	選擇匹配E的元素，且該元素定義了foo屬性。E選擇符能夠省略，表示選擇定義了foo屬性的任意類型的元素。
E[foo="bar"]	屬性選擇器	選擇匹配E的元素，且該元素foo屬性值爲「bar」
E[foo~="bar"]	屬性選擇器	選擇匹配E的元素，且該元素定義了foo屬性，foo屬性值是一個以空格符分隔的列表，其中一個列表的值爲「bar」，E選擇符能夠省略。
E[foo!="en"]	屬性選擇器	選擇匹配E的元素，且該元素定義了foo屬性，foo屬性值是一個用連字符（-）分隔的列表，值以「en」開頭。
E:first-child	結構僞類選擇器	選擇匹配E的元素，且該元素爲父元素的第一個子元素
E::before	僞元素選擇器	在匹配E的元素前面插入內容
E::after	僞元素選擇器	在匹配E的元素後面插入內容
E > F	子包含選擇器	選擇匹配F的元素，且該元素爲所匹配E元素的子元素。
E + F	相鄰兄弟選擇器	選擇匹配F的元素，且該元素爲所匹配E元素後面相鄰的位置。

3. CSS3新增屬性選擇器

選擇器	類型	說明
E[foo^="bar"]	屬性選擇器	選擇匹配E的元素，且該元素定義了foo屬性，foo屬性值以「bar」開始。E選擇符能夠省略，表示可匹配任意類型的元素。
E[foo$="bar"]	屬性選擇器	選擇匹配E的元素，且該元素定義了foo屬性，foo屬性值以「bar」結束。E選擇符能夠省略，表示可匹配任意類型的元素。
E[foo*="bar"]	屬性選擇器	選擇匹配E的元素，且該元素定義了foo屬性，foo屬性值包含「bar」。E選擇符能夠省略，表示可匹配任意類型的元素。

　　示例css

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <style type="text/css">
        body {
            font-size: 12px;
        }

        ul, li {
            list-style: none;
        }

        li {
            height: 22px;
            line-height: 22px;
        }

        a {
            text-decoration: none;
            color: #E47911;
        }

            a[href$="docx"] {
                background: url(/Content/icon/word.png) no-repeat;
                padding-left: 20px;
            }

            a[href$="xlsx"] {
                background: url(/Content/icon/excel.png) no-repeat;
                padding-left: 20px;
            }

            a[href$="pptx"] {
                background: url(/Content/icon/powerpoint.png) no-repeat;
                padding-left: 20px;
            }

            a[href$="pst"] {
                background: url(/Content/icon/outlook.png) no-repeat;
                padding-left: 20px;
            }
    </style>
</head>
<body>
    <ul>
        <li><a href="Word文件.docx">Word文件</a></li>
        <li><a href="Excel文件.xlsx">Excel文件</a></li>
        <li><a href="PPT文件.pptx">PPT文件</a></li>
        <li><a href="Outlook文件.pst">Outlook文件</a></li>
    </ul>
</body>
</html>

　　效果html

4. 結構僞類選擇器

　　結構僞類利用DOM實現元素過濾，經過DOM的相互關係來匹配特定的元素，減小文檔內對class屬性和ID屬性的定義，使得文檔更加簡潔。web

選擇器	說明
E:root	選擇匹配E所在文檔的根元素。在（X）HTML文檔中，根元素就是html元素，此時該選擇器與html類型選擇器匹配的內容相同。
E:nth-child(n)	選擇全部在其父元素中第n個位置的匹配E的子元素。注意，參數n能夠是數字（一、二、3）、關鍵字（odd、even）、公式（2n、2n+3）參數的索引從1開始。 tr:nth-child(3)匹配全部表格中第3排的tr； tr:nth-child(2n+1)匹配全部表格的奇數行； tr:nth-child(2n)匹配全部表格的偶數行； tr:nth-child(odd)匹配全部表格的奇數行； tr:nth-child(even)匹配全部表格的偶數行；
E:nth-last-child(n)	選擇全部在其父元素中倒數第n個位置的匹配E的子元素
E:nth-of-type(n)	選擇父元素中第n個位置，且匹配E的子元素。注意，全部匹配E的子元素被分離出來單獨排序。非E的子元素不參與排序。參數n能夠是數字，關鍵字、公式。例：p:nth-of-type(1)
E:nth-last-of-type(n)	選擇父元素中倒數第n個位置，且匹配E的子元素。
E:last-child	選擇位於其父元素中最後一個位置，且匹配E的子元素。
E:first-of-type	選擇位於其父元素中且匹配E的第一個同類型的子元素。該選擇器的功能相似於 E:nth-of-type(1)
E:last-of-type	選擇位於其父元素中且匹配E的最後第一個同類型的子元素。該選擇器的功能相似於 E:nth-last-of-type(1)
E:only-child	選擇其父元素只包含一個子元素，且該子元素匹配E。
E:only-of-type	選擇其父元素只包含一個同類型的子元素，且該子元素匹配E。
E:empty	選擇匹配E的元素，且該元素不包含子節點。

　　示例url

<style type="text/css">
    table {
        table-layout: fixed;
        border-collapse: collapse;
        empty-cells: show;
    }

    tr:nth-child(even) {
        background-color: #f5f5f5;
    }
</style>

　　設置圓角spa

.content {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

5. UI狀態僞類選擇器

選擇器	說明
E:enabled	選擇匹配E的全部可用UI元素。
E:disabled	選擇匹配E的全部不可用UI元素。
E:checked	選擇匹配E的全部可用UI元素。例：input:checked匹配input type爲radio及checkbox元素

6. CSS3其餘選擇器

選擇器	說明
E~F	通用兄弟元素選擇器類型。選擇匹配F的全部元素，且匹配元素位於匹配E的元素後面。在DOM結構樹中，E和F所匹配的元素應該在同一級結構上。
E:not(s)	否認僞類選擇器類型。選擇匹配E的全部元素，且過濾掉匹配s選擇符的任意元素。 s是一個簡單結構的選擇器，不能使用符合選擇器，
E:target	目標僞類選擇器類型。選擇匹配E的全部元素，且匹配元素被相關URL指向。注意：該選擇器是動態選擇器，只有存在URL指向該匹配元素時，樣式才起效果。例：demo.html#id

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。