CSS 筆記——選擇器

阿新 • • 發佈：2019-03-31

什麽覆蓋類型 contains 並且 into com 其中 drop

1. 選擇器

（1）類型選擇器（標簽選擇器）

基本語法

E { sRules }

使用說明

類型選擇器。以文檔對象(Element)類型作為選擇器。選擇面較大，適合做某種標簽元素外觀的常規設置。

代碼示例

<style type="text/css" media="screen">
    p {
        text-align: center;
        color: red;
    }
    h1 {
        text-align: right;
        color: green;
    }
</style>

<body>
    <h1>This heading will be center-aligned</h1>
    <p>This paragraph will also be center-aligned.</p>
</body>

（2）通用選擇器

基本語法

* { sRules }

使用說明

通用選擇器。選定文檔目錄樹(DOM)中的所有類型的單一對象。假如通用選擇器不是單一選擇器中的唯一組成，“*”可以省略。

代碼示例

<style type="text/css" media="screen">
    * {
        text-align: center;
        color: blue;
    }
</style>

<body>
    <h1>This heading will be center-aligned</h1>
    <p>This paragraph will also be center-aligned.</p>
    <div>This is a div.</div>
</body>

（3）id 選擇器

基本語法

#ID { sRules }

使用說明

ID選擇器。以文檔目錄樹(DOM)中作為對象的唯一標識符的 ID 作為選擇器。 ID 名稱不能以數字開頭！

代碼示例

<style type="text/css" media="screen">
    #red {
        color:red;
    }
    #green {
        color:green;
    }   
</style>

<body>
    <p id="red">這個段落是紅色。</p>
    <p id="green">這個段落是綠色。</p>
</body>

（4）class 選擇器

基本語法

E.className { sRules }

使用說明

網頁中，無論什麽標簽的元素，只要class屬性和該類選擇器的名字一致，則被選中。類名的第一個字符不能使用數字！

類選擇器在定義的時候，需要在類名字前放置一個 . 符號，以表征這個不是標簽選擇器，而是類選擇器，在使用的時候，則不需要這個. 符號。其效果等同於E [ class ~= className ]

一個元素屬於某種類選擇器控制範圍，加上class屬性就可以了。類選擇可以跨標簽，無論什麽標簽，只要class屬性和該類名字一致，就屬於這個類選擇器控制範圍。一個標簽可以被多個類選擇器修飾，同樣的類選擇器，如果屬性有沖突，將會覆蓋前頭的屬性值，定義（非調用）在後頭的優先級高於前頭。

代碼示例

<style type="text/css" media="screen">
    .red {
        color: red;
        text-align: left;
    }
    .center {
        text-align: center;
    }
</style>

<body>
    <h1 class="center">
        This heading will be center-aligned
    </h1>
    <p class="center red">
        This paragraph will also be center-aligned.
    </p>
</body>

（5）屬性選擇器

基本語法

E [ attr ] { sRules }  
E [ attr = value ] { sRules }  
E [ attr ~= value ] { sRules }  
E [ attr |= value ] { sRules }

使用說明

屬性選擇器。

選擇具有 attr 屬性的 E
選擇具有 attr 屬性且屬性值等於 value 的 E
選擇具有 attr 屬性且屬性值為一用空格分隔的字詞列表，其中一個等於 value 的 E 。這裏的 value 不能包含空格
選擇具有 attr 屬性且屬性值為一用連字符分隔的字詞列表，由 value 開始的 E

代碼示例

<style type="text/css" media="screen">
    p[class=demo] {
        color: red;
    }
</style>

<body>
    <p class="demo">
        This paragraph will also be center-aligned.
    </p>
</body>

（6）選擇器分組

基本語法

E1 , E2 , E3 { sRules }

使用說明

選擇器分組。將同樣的定義應用於多個選擇器，可以將選擇器以逗號分隔的方式並為組。

代碼示例

<style type="text/css" media="screen">
    h1, p, div {
        text-align: center;
        color: red;
    }
</style>

<body>
    <h1>This heading will be center-aligned</h1>
    <p>This paragraph will also be center-aligned.</p>
    <div>This is a div.</div>
</body>

（7）包含選擇器（後代選擇器）

基本語法

E1 E2 { sRules }

使用說明

包含選擇器。選擇所有被 E1 包含的 E2 。即 E1.contains(E2)==true 。即選取某元素的後代元素。

代碼示例

<style type="text/css" media="screen">
    div p {
        background-color:yellow;
        text-align: center;
    }
</style>

<body>
    <div>
        <p>段落 1。 在 div 中。</p>
        <span><p>段落 2。 在 div 中的 span 中。</p></span>
    </div>
    <p>段落 3。不在 div 中。</p>
    <p>段落 4。不在 div 中。</p>
</body>

（8）子對象選擇器

基本語法

E1 > E2 { sRules }

使用說明

子對象選擇器。選擇所有作為 E1 子對象的 E2 。與包含選擇器相比，子對象選擇器只能選擇作為某對象子對象的元素。

代碼示例

<style type="text/css" media="screen">
    div>p {
        background-color:yellow;
        text-align: center;
    }
</style>

<body>
    <div>
        <h2>標題</h2>
        <p>段落 1。 在 div 中。</p>
        <span><p>段落 2。 在 div 中的 span 中。</p></span>
    </div>
    <p>段落 3。不在 div 中。</p>
    <p>段落 4。不在 div 中。</p>
</body>

（9）相鄰兄弟選擇器

基本語法

E1 + E2 { sRules }

使用說明

相鄰選擇器。選擇所有作為 E1 元素相鄰的下一個元素E2 。選擇緊接在另一個元素後的元素，而且二者有相同的父元素。

代碼示例

<style type="text/css" media="screen">
    h1+p, div+p {
        text-align: center;
        color: red;
        background-color:yellow;
    }
</style>
<body>
    <h1>This is a heading.</h1>
    <p>This is paragraph.</p>
    <p>This is paragraph.</p>
    <h1>Welcome to My Homepage</h1>
    <div>
        <h1>My name is Donald</h1>
        <p>I live in Duckburg.</p>
        <p>I will not be styled.</p>
    </div>
    <p>My best friend is Mickey.</p>
    <p>I will not be styled.</p>
</body>

（10）後續兄弟選擇器

基本語法

E1 ~ E2 { sRules }

使用說明

後續兄弟選擇器。選擇所有作為 E1 元素之後的兄弟元素 E2 。

代碼示例

<style type="text/css" media="screen">
    div~p {
        text-align: center;
        color: red;
        background-color:yellow;
    }
</style>

<body>
    <p>之前段落，不會選中。</p>
    <div>
        <p>段落 1。 在 div 中。</p>
        <p>段落 2。 在 div 中。</p>
    </div>
    <p>段落 3。不在 div 中。</p>
    <p>段落 4。不在 div 中。</p>
</body>

（11）偽類及偽對象選擇器

基本語法

E : Pseudo-Classes { sRules } 

E : Pseudo-Elements { sRules }

使用說明

CSS偽類是用來添加一些選擇器的特殊效果。

由於狀態的變化是非靜態的，所以元素達到一個特定狀態時，它可能得到一個偽類的樣式；當狀態改變時，它又會失去這個樣式。由此可以看出，它的功能和class有些類似，但它是基於文檔之外的抽象，所以叫偽類。

偽類列表

偽類列表	偽類列表	偽類列表	偽對象列表
:link	:hover	:active	:first-letter
:focus	:first-child	:first	:first-line
:visited	:left	:right	:before
:lang			:after

（11.1）:link

基本語法

Selector : link { sRules }

使用說明

設置元素在未被訪問前的樣式。默認值由瀏覽器決定。

對於無 href 屬性(特性)的 a 對象，此偽類不發生作用。

IE3將 :link 偽類的樣式表屬性作用於 visited 偽類。

代碼示例

a:link { color: red }
:link  { color: red }

（11.2）:hover

基本語法

Selector : hover { sRules }

使用說明

設置對象在其鼠標懸停時的樣式。

在CSS1中此偽類僅可用於 a 對象。對於無 href 屬性(特性)的 a 對象，此偽類不發生作用。在CSS2中此偽類可以應用於任何對象。

代碼示例

a:link    { color: red }    /* unvisited links */
a:visited { color: blue }   /* visited links   */
a:hover   { color: yellow } /* user hovers     */
a:active  { color: lime }   /* active links    */

（11.3）:active

基本語法

Selector : active { sRules }

使用說明

設置對象在被用戶激活（在鼠標點擊與釋放之間發生的事件）時的樣式。

在CSS1中此偽類僅可用於 a 對象。對於無 href 屬性(特性)的 a 對象，此偽類不發生作用。在CSS2中此偽類可以應用於任何對象。

並且 :active 可以和 :link 以及 :visited 狀態同時發生。

代碼示例

a:link    { color: red }    /* unvisited links */
a:visited { color: blue }   /* visited links   */
a:hover   { color: yellow } /* user hovers     */
a:active  { color: lime }   /* active links    */

（11.4）:visited

基本語法

Selector : visited { sRules }

使用說明

設置 a 對象在其鏈接地址已被訪問過時的樣式。 IE3將 :link 偽類的樣式表屬性作用於 :visited 偽類。

默認值由瀏覽器決定。定義網頁過期時間或用戶清空歷史記錄將影響此偽類的作用。對於無 href 屬性(特性)的 a 對象，此偽類不發生作用。

代碼示例

a:link    { color: red }    /* unvisited links */
a:visited { color: blue }   /* visited links   */
a:hover   { color: yellow } /* user hovers     */
a:active  { color: lime }   /* active links    */

（11.5）:focus

基本語法

Selector : focus { sRules }

使用說明

設置對象在成為輸入焦點(該對象的 onfocus 事件發生)時的樣式。

代碼示例

a:focus { background: yellow }
a:focus:hover { background: white }

（11.6）:first-child

基本語法

Selector : first-child { sRules }

使用說明

設置 E 的第一個子對象的樣式。

代碼示例

* > a:first-child   /* A is first child of any element */
a:first-child       /* Same */

（11.7）:first

基本語法

Selector : first { sRules }

使用說明

設置頁面容器第一頁使用的樣式。僅用於 @page 規則

代碼示例

@page :first { margin: 4cm }

（11.8）:left

基本語法

Selector : left { sRules }

使用說明

設置頁面容器位於裝訂線左邊的所有頁面使用的樣式。僅用於 @page 規則。

代碼示例

@page :left { margin: 4cm }

（11.9）:right

基本語法

Selector : right { sRules }

使用說明

設置頁面容器位於裝訂線右邊的所有頁面使用的樣式。僅用於 @page 規則。

代碼示例

@page :right { margin: 4cm }

（11.10）:lang

基本語法

Selector : lang { sRules }

使用說明

設置對象使用特殊語言的內容的樣式。

代碼示例

html:lang(fr-ca) { quotes: '? ' ' ?' }
html:lang(de) { quotes: '?' '?' '\2039' '\203A' }
:lang(fr) > Q { quotes: '? ' ' ?' }
:lang(de) > Q { quotes: '?' '?' '\2039' '\203A' }

（11.11）:first-letter

基本語法

Selector : first-letter { sRules }

使用說明

設置對象內的第一個字符的樣式。

此偽對象僅作用於塊對象。內聯要素要使用該屬性，必須先設定對象的 height 或 width 屬性，或者設定 position 屬性為 absolute ，或者設定 display 屬性為 block 。

在此偽對象中配合使用 font-size 屬性和 float 屬性可以制作首字下沈效果。

代碼示例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
    <TITLE>Drop cap initial letter</TITLE>
    <STYLE type="text/css">
        P {
            font-size: 12pt;
            line-height: 1.2
        }
        P:first-letter {
            font-size: 200%;
            font-style: italic;
            font-weight: bold;
            float: left
        }
        SPAN {
            text-transform: uppercase
        }
    </STYLE>
</HEAD>
<BODY>
    <P><SPAN>The first</SPAN> few words of an article
        in The Economist.</P>
</BODY>
</HTML>

（11.12）:first-line

基本語法

Selector : first-line { sRules }

使用說明

設置對象內的第一行的樣式。

如果未強制指定對象的 width 屬性，首行的內容長度可能不是固定的。

代碼示例

p:first-line { text-transform: uppercase }

<P>This is a somewhat long HTML 
paragraph that will be broken into several 
lines. The first line will be identified
by a fictional tag sequence. The other lines 
will be treated as ordinary lines in the 
paragraph.</P>

（11.13）:before

基本語法

Selector : before { sRules }

使用說明

用來和 content 屬性一起使用，設置在對象前(依據對象樹的邏輯結構)發生的內容。

（11.14）:after

基本語法

Selector : after { sRules }

使用說明

用來和 content 屬性一起使用，設置在對象後(依據對象樹的邏輯結構)發生的內容。

CSS 筆記——選擇器

CSS 筆記——選擇器

1. 選擇器

（1）類型選擇器（標簽選擇器）

基本語法

使用說明

代碼示例

（2）通用選擇器

基本語法

使用說明

代碼示例

（3）id 選擇器

基本語法

使用說明

代碼示例

（4）class 選擇器

基本語法

使用說明

代碼示例

（5）屬性選擇器

基本語法

使用說明

代碼示例

（6）選擇器分組

基本語法

使用說明

代碼示例

（7）包含選擇器 （後代選擇器）

基本語法

使用說明

代碼示例

（8）子對象選擇器

基本語法

使用說明

代碼示例

（9）相鄰兄弟選擇器

基本語法

使用說明

代碼示例

（10）後續兄弟選擇器

基本語法

使用說明

代碼示例

（11）偽類及偽對象選擇器

基本語法

使用說明

（11.1）:link

基本語法

使用說明

代碼示例

（11.2）:hover

基本語法

使用說明

代碼示例

（11.3）:active

基本語法

使用說明

代碼示例

（11.4）:visited

基本語法

使用說明

代碼示例

（11.5）:focus

基本語法

使用說明

代碼示例

（11.6）:first-child

基本語法

使用說明

代碼示例

（11.7）:first

基本語法

使用說明

代碼示例

（11.8）:left

基本語法

使用說明

代碼示例

（11.9）:right

基本語法

使用說明

（7）包含選擇器（後代選擇器）