CSS選擇器

原創 juliaym 2019-02-23 00:01

“在 CSS 中，選擇器是一種模式，用於選擇需要添加樣式的元素。”最新的選擇器版本是CSS3，但使用廣泛的仍是CSS1和CSS2。

選擇器分爲三種：基本選擇器、複合選擇器和僞元素選擇器。

一、選擇器彙總

選擇器例子例子描述CSS
.class.intro選擇 class="intro" 的所有元素。1
#id#firstname選擇 id="firstname" 的所有元素。1
**選擇所有元素，包括html和body元素。2
elementp選擇所有 <p> 元素。1
element,elementdiv,p選擇所有 <div> 元素和所有 <p> 元素。1
element elementdiv p選擇 <div> 元素內部的所有 <p> 元素。1
element>elementdiv>p選擇父元素爲 <div> 元素的所有 <p> 元素。2
element+elementdiv+p選擇緊接在 <div> 元素之後的所有 <p> 元素。2
[attribute][target]選擇帶有 target 屬性所有元素。2
[attribute=value][target=_blank]選擇 target="_blank" 的所有元素。2
[attribute~=value][title~=flower]選擇 title 屬性包含單詞 "flower" 的所有元素。2
[attribute|=value][lang|=en]選擇 lang 屬性值以 "en" 開頭的所有元素。2
:linka:link選擇所有未被訪問的鏈接。1
:visiteda:visited選擇所有已被訪問的鏈接。1
:activea:active選擇活動鏈接。1
:hovera:hover選擇鼠標指針位於其上的鏈接。1
:focusinput:focus選擇獲得焦點的 input 元素。2
:first-letterp:first-letter選擇每個 <p> 元素的首字母。1
:first-linep:first-line選擇每個 <p> 元素的首行。1
:first-childp:first-child選擇屬於父元素的第一個子元素的每個 <p> 元素。2
:beforep:before在每個 <p> 元素的內容之前插入內容。2
:afterp:after在每個 <p> 元素的內容之後插入內容。2
:lang(language)p:lang(it)選擇帶有以 "it" 開頭的 lang 屬性值的每個 <p> 元素。2
element1~element2p~ul選擇前面有 <p> 元素的每個 <ul> 元素。3
[attribute^=value]a[src^="https"]選擇其 src 屬性值以 "https" 開頭的每個 <a> 元素。3
[attribute$=value]a[src$=".pdf"]選擇其 src 屬性以 ".pdf" 結尾的所有 <a> 元素。3
[attribute*=value]a[src*="abc"]選擇其 src 屬性中包含 "abc" 子串的每個 <a> 元素。3
:first-of-typep:first-of-type選擇屬於其父元素的首個 <p> 元素的每個 <p> 元素。3
:last-of-typep:last-of-type選擇屬於其父元素的最後 <p> 元素的每個 <p> 元素。3
:only-of-typep:only-of-type選擇屬於其父元素唯一的 <p> 元素的每個 <p> 元素。3
:only-childp:only-child選擇屬於其父元素的唯一子元素的每個 <p> 元素。3
:nth-child(n)p:nth-child(2)選擇屬於其父元素的第二個子元素的每個 <p> 元素。3
:nth-last-child(n)p:nth-last-child(2)同上，從最後一個子元素開始計數。3
:nth-of-type(n)p:nth-of-type(2)選擇屬於其父元素第二個 <p> 元素的每個 <p> 元素。3
:nth-last-of-type(n)p:nth-last-of-type(2)同上，但是從最後一個子元素開始計數。3
:last-childp:last-child選擇屬於其父元素最後一個子元素每個 <p> 元素。3
:root:root選擇文檔的根元素。3
:emptyp:empty選擇沒有子元素的每個 <p> 元素（包括文本節點）。3
:target#news:target選擇當前活動的 #news 元素。3
:enabledinput:enabled選擇每個啓用的 <input> 元素。3
:disabledinput:disabled選擇每個禁用的 <input> 元素3
:checkedinput:checked選擇每個被選中的 <input> 元素。3
:not(selector):not(p)選擇非 <p> 元素的每個元素。3
::selection::selection選擇被用戶選取的元素部分。3

二、基本選擇器

1. 通用選擇器：*

2. 元素選擇器：直接用元素名稱作爲選擇器名

3. ID選擇器：#ID

4. 類選擇器：.類名，指定一類元素的樣式；元素.類名，指定某類裏面的特定元素的樣式；一個元素可以包含多個樣式，如：<span class="abc def">here</span>

5. 屬性選擇器：

[href] {                        //屬性選擇器，CSS2
    color:orange;
}

[type="password"] {             //匹配屬性值的屬性選擇器，CSS2
    border:1px solid red;
}

[href^="http”] {                //屬性值開頭匹配的屬性選擇器，CSS3
    color:orange;
}

[href$=".cn"]{                  //屬性值結尾匹配的屬性選擇器，CSS3
    color:red;
}

[href*="baidu"] {               //屬性值包含指定字符的屬性選擇器，CSS3
    color:blue;
}

三、複合選擇器

1. 分組選擇器

p,.abc,#name,[href] {
    color:red;
}

2. 後代選擇器：子代的深度不限

#name b {
    color:orange;
}

3. 子代選擇器：僅選擇下一層內的子元素

#name > b {
    color:blue;
}

4. 相鄰兄弟選擇器：匹配與第一個元素緊鄰的第二個元素

p + b {
    color:red;
}

5. 普通兄弟選擇器：匹配第一個元素後出現的所有第二個元素

p ~ b {
    color:red;
}

四、僞選擇器

僞選擇器都需要加上前置選擇器來限定範圍，否則默認範圍是<body>。

1. 僞元素選擇器：前置兩個冒號::

①::first-line  塊級首行（每一塊的第一行），示例：

<head>
    <style>
        ::first-line {
            color:red;
        }
        div::first-line{
            color:orange;
        }
    <style>
</head>
<body>
    <p>this is red</p>
    <div>this is orange</div>
</body>

②::first-letter  塊級首字母

③::before,::after  在元素前插入，在元素後附加，示例：

<head>
    <style>
        a::before {
            content:"點擊";
        }
        a::after {
            content:"搜索";
        }
    <style>
</head>
<body>
    <a href="www.baidu.com">百度</a>
</body>

④::selection  設置鼠標選定時的文字顏色

2. 僞類選擇器：前置一個冒號:

①結構性僞類選擇器：根據元素在文檔中的位置選擇元素

  • 根元素選擇器：總是返回html元素

:root {
    border:1px solid red;
}

  • 子元素選擇器

<head>
    <style>
        ul > li:first-child {
            color:red;
        }
        ul > li:last-child {
            color:blue;
        }
        ul > li:only-child {
            color:green;
        }
        div > p:only-of-type {        //第一個元素僅包含一個第二個元素的選擇器
            color:orange;
        }
    <style>
</head>
<body>
    <ul>
        <li>第一個子元素紅色</li>
        <li>第二個子元素</li>
        <li>第三個子元素藍色</li>
    </ul>
    <ul>
        <li>唯一一個子元素綠色</li>
    </ul>
    <div>
        <p>橙色</p>
        <span>文字</span>
    </div>
</body>

  • :nth-child(n)系列

<head>
    <style>
        ul > li:nth-child(1) {        //正數第一個
            color:red;
        }
        ul > li:nth-last-child(1) {   //倒數第一個
            color:blue;
        }
        div > p:nth-of-type(2) {      //第一個元素內，第二種元素的第二個
            color:green;
        }
        div > p:nth-last-of-type(2) { //第一個元素內，第二種元素的倒數第二個
            color:orange;
        }
    <style>
</head>
<body>
    <ul>
        <li>第一個子元素紅色</li>
        <li>第二個子元素</li>
        <li>第三個子元素藍色</li>
    </ul>
    <div>
        <p>文字</p>
        <span>文字</span>
    </div>
    <div>
        <p>橙色</p>
        <p>綠色</p>
    </div>
</body>

②UI僞類選擇器：根據元素的狀態匹配元素，主要用在表單裏面

  • enabled&disabled, checked, valid&invalid,required&optional

<head>
    <style>
        input:enabled {
            border:1px solid blue;
        }
        input:disabled {
            border:1px solid pink;
        }
        input:checked {
            display:none    //隱藏該元素
        }
        input:valid {
            border:1px solid green;
        }
        input:invalid {
            border:1px solid red;
        }
        input:required {
            border:1px solid orange;
        }
        /*input:optional {
            border:1px solid yellow;
        }*/
    <style>
</head>
<body>
    <form>
        藍色邊框：<input type="text"><br>
        粉色邊框：<input type="text" disabled><br>
        
        勾選框在這裏：<input type="checkbox"><br>
        勾選框隱藏了：<input type="chechbox" checked><br>
        
        輸入非郵箱會有紅色邊框，輸入郵箱會有綠色邊框：<input type="email"><br>
        
        橙色邊框：<input type="text" required><br>
        <button>提交</button>
    </form>
</body>

③動態僞類選擇器

<head>
    <style>
        a:link {                    //超鏈接未點擊時的樣式
            color:red;
        }
        a:visited {                 //超鏈接點擊後的樣式
            color:yellow;
        }
        a:hover {                   //鼠標懸停時超鏈接的樣式
            color:orange;
        }
        a:active {
            color:green;            //鼠標點擊時超鏈接的樣式
        }
        input:focus {
            border:1px solid red;   //輸入框獲得焦點時的樣式
        }
    <style>
</head>
<body>
    <a href="www.baidu.com">百度</a>
    <form>
        <input type="text"><br>
        <input type="text"><br>
    </form> 
</body>

④其他僞類選擇器

<head>
    <style>
        a:not([href*="baidu"]) {    //反選，含baidu以外的超鏈接都變紅色
            color:red;
        }
        :empty {                    //空元素，如<p></p>
            display:none;
        }
        :lang(en) {                 //語言屬性爲en的文字設爲藍色
            color:blue;
        }
        :target {                   //通過錨點定位到該元素時文字變綠
            color:green;            //錨點定位地址：...index.html#myTarget
        }
    <style>
</head>
<body>
    <a href="www.baidu.com">百度</a>
    <a href="www.google.com">谷歌</a>
     
    <form>
        <input type="text"><br>
        <input type="text"><br>
    </form> 
    
    <p></p>
    
    <b id="myTarget">錨點定位時變綠</b>
</body>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

CSS初學

瓦蘭 2019-02-23 13:19:08

個人空間

dqf1989 2019-02-23 00:42:19

css佈局簡史與決勝未來的第四代css佈局技術

麪包理想 2019-02-23 00:25:51

CSS

juliaym 2019-02-23 00:01:20

ie9中line-height不生效

pingworkc 2019-02-22 23:13:00

XHTML-CSS寫作建議

hkw1986yf 2019-02-22 23:08:53

用JQuery 和CSS搭建WEB版滑動導航條

ahtlwwj 2019-02-22 23:07:05

CSS過渡和動畫

sky星辰01 2019-02-22 22:54:15

jQuery與CSS結合製作tab效果有一個很重要的地方需要注意。

lflianglan 2019-02-22 22:53:41

24款非常實用的CSS3工具終極收藏

紙片人 2019-02-22 22:46:07

CSS定義字體間距 字體行與行間距

ty2538402559 2019-02-22 22:09:06

CSS選擇器、優先級與匹配原理

polaris1119 2019-02-22 22:01:57

css選擇器

zleaves 2019-02-23 13:49:29

時間選擇器:HYDatePicker

rainbownight 2019-02-22 22:10:13

jQuery 選擇器

索菲亞luky 2019-02-22 22:05:34