第七十節，css選擇器

時間 2019-11-12

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

原文原文鏈接

css選擇器css

學習要點：
1.選擇器總彙
2.基本選擇器
3.複合選擇器
4.僞元素選擇器html

本章主要探討 HTML5中 CSS選擇器，經過選擇器定位到想要設置樣式的元素。目前CSS選擇器的版本已經升級至第三代，即 CSS3選擇器。CSS3選擇器提供了更多、更豐富的選擇器方式，主要分爲三大類。html5

一．選擇器總彙學習

本節課主要涉及到三種選擇器：基本選擇器、複合選擇器和僞元素選擇器，具體以下：測試

選擇器　　名稱　　　　說明　　　　　　 CSS版本ui

* 　　　　通用選擇器　　選擇全部元素 2spa

<type> 　　元素選擇器　　　　選擇指定類型的元素 1code

#<id> 　　 id選擇器　　選擇指定 id屬性的元素 1orm

.<class> 　　　 class選擇器　　選擇指定 class屬性的元素 1htm

[attr]系列　　屬性選擇器　　選擇指定 attr屬性的元素 2 ~ 3

s1,s2,s3... 分組選擇器　　選擇多個選擇器的元素 1

s1 s2 　　後代選擇器　　選擇指定選擇器的後代元素 1

s1 > s2 　　子選擇器　　　　選擇指定選擇器的子元素 2

s1 + s2 　　相鄰兄弟選擇器　　選擇指定選擇器相鄰的元素 2

s1 ~ s2 　　　普通兄弟選擇器　　　選擇指定選擇器後面的元素 3

::first-line 　　僞元素選擇器　　選擇塊級元素文本的首行 1

::first-letter 　　僞元素選擇器　　選擇塊級元素文本的首字母 1

::before 　　僞元素選擇器　　選擇元素以前插入內容 2

::after 　　僞元素選擇器選擇元素以後插入內容 2

二．基本選擇器
使用簡單且頻率高的一些選擇器歸類爲基本選擇器。

1.通用選擇器

解釋：「*」號選擇器是通用選擇器，功能是匹配全部 html元素的選擇器包括<html>和<body>標籤。可使用以下元素標記測試效果：

    <style type="text/css">
         * {
             border:  1px  solid  red;
         }
    </style>

    <p>段落</p>
    <b>加粗</b>
    <span>無</span>

通用選擇器會將全部元素匹配並配置樣式，這是把雙刃劍，好處就是很是方便，壞處就是將沒必要要的元素也配置了。目前爲止，還不存在全部元素都必須配置的樣式，因此，通常來講，不經常使用。

2.元素選擇器

    <style type="text/css">
        p {
            color:  red;
        }
    </style>

    <p>段落</p>

解釋：直接使用元素名稱做爲選擇器名便可。

3.ID選擇器

    <style type="text/css">
       #abc {
            font-size: 20px;
       }
    </style>

    <p id="abc">段落</p>

解釋：經過對元素設置全局屬性 id，而後使用#id值來選擇頁面惟一元素。

4.類選擇器

<style type="text/css">
    .abc{
        border:  1px  solid  red;
    }
</style>

<b class="abc">加粗</b>
<span class="abc">無</span>

解釋：經過對元素設置全局屬性 class，而後使用.class值選擇頁面一個或多個元素。

也可使用「元素.class值」的形式，限定某種類型的元素。

b.abc{
    color: #ff272d;
}

<b class="abc">段落</b>
<b class="abc">加粗</b>
<span class="abc">文本</span>

類選擇器還能夠調用多個樣式，中間用空格隔開進行層疊。

.abc{
    color: #ff272d;
}
.def{
    font-size: 20px;
}

<b class="abc">段落</b>
<b class="abc">加粗</b>
<span class="abc , def">文本</span>

5.屬性選擇器，經過一些標籤屬性來控制

超連接屬性選擇器，所需 CSS2版本

[href]{
    color: #ff272d;
}

<a href="http://www.baidu.com">百度</a>
<p><a href="http://www.haosou.com">好搜</a></p>

解釋：屬性選擇器，直接經過兩個中括號裏面包含屬性名便可。固然，還有更多擴展的屬性選擇器。

匹配屬性值的屬性選擇器，經過一個屬性裏的一個屬性值來控制，所需 CSS2版本

[type="text"]{
    background-color: #fe1c23;
}

<input type="text">
<input type="password">

屬性值開頭匹配的屬性選擇器，也就是屬性值開頭匹配規則才能控制，所需版本 CSS3

[href^="http"] {
    color:  orange;
}

<a href="http://www.jxiou.com">百度</a>
<a href="www.haosou.com">好搜</a>

屬性值結尾匹配的屬性選擇器。也就是屬性值結尾匹配規則才能控制，所需版本 CSS3

[href$=".com"] {
    color:  orange;
}

<a href="http://www.jxiou.cn">百度</a>
<a href="http://www.haosou.com">好搜</a>

屬性值包含指定字符的屬性選擇器。也就是標籤屬性值包含了指定的字符就受控制，所需版本 CSS3

[href*="jxiou"] {
    color: #fe1c23;
}

<a href="http://www.jxiou.cn">百度</a>
<a href="http://www.haosou.com">好搜</a>

屬性值具備多個值時，匹配其中一個值的屬性選擇器。所需版本 CSS2

[class~="edf"] {
    font-size:  50px;
}

<p class="abc">這是一段文本</p>
<p class="edf">這是另一段文本</p>

屬性值具備多個值且使用「-」號鏈接符分割的其中一個值的屬性選擇器，所需版本 CSS2

[lang|="en"] {
    color:  red;
}

<p class="abc">這是一段文本</p>
<p class="edf">這是另一段文本</p>
<i  lang="en-us">HTML5</i>

三．複合選擇器
將不一樣的選擇器進行組合造成新的特定匹配，咱們稱爲複合選擇器。

1.分組選擇器

解釋：將多個選擇器經過逗號分割，同時設置一組樣式。固然，不但能夠分組元素選擇器，還可使用 ID選擇器、類選擇器、屬性選擇器混合使用。

p,b,i,span {
    color:  red;
}

<p>這是一段文本</p>
<b>這是另一段文本</b>
<i>HTML5</i>

2.後代選擇器

解釋：選擇<p>元素內部全部<b>元素。不在意<b>的層次深度。固然，後代選擇器也能夠混合使用 ID選擇器、類選擇器、屬性選擇器。

p b {
    color:  red;
}

<p>這是另外<b>一段</b>文本</p>
<i>HTML5</i>

3.子選擇器

解釋：子選擇器相似與後代選擇器，而最大的區別就是子選擇器只能選擇父元素向下一級的元素，不能夠再往下選擇。

ul > li{
    border:  1px  solid  red;
}

<ul>
    <li>我是兒子
        <ol>
            <li>我是孫子</li>
            <li>我是孫子</li>
        </ol>
    </li>
    <li>我是兒子</li>
    <li>我是兒子</li>
</ul>

4.相鄰兄弟選擇器

解釋：相鄰兄弟選擇器匹配和第一個元素相鄰的第二個元素。

p + b {
    color:  red;
}

<p>這是一段文本</p>
<b>這是另一段文本</b>

5.普通兄弟選擇器

解釋：普通兄弟選擇器匹配和第一個元素後面的全部元素。

p ~ b {
    color:  red;
}

<p>這是一段文本</p>
<span>文本</span>
<b>這是另一段文本</b>

四．僞元素選擇器

僞選擇器分爲兩種第一種是下節僞類選擇器，還有一種就是僞元素選擇器。這兩種選擇器特性上比較容易混淆，在 CSS3中爲了區分，僞元素前置兩個冒號（::），僞類前置一個冒號（:）。

1.::first-line塊級首行

解釋：塊級元素好比<p>、<div>等的首行文本被選定。若是想限定某種元素，能夠加上前置 p::first-line。

p::first-line {
    color:  red;
}

<p>當梁宇方決意不出席鉑爾曼酒店十五週年慶酒會的時候，他的父親，也是酒店董事長的梁澤，以及總經理梁宇青，正殷殷期盼着可以在這個酒會上正式將他介紹出來。無意接班的宇方居然藏身在馬場和分別六年的愛馬Sky馳騁草原。宇青的忽然現身馬場令他無所遁行，就這樣被壓回了酒店準備亮相。但宇方仍不甘示弱，仍乘機逃跑… 小歌星杜允兒來到酒店接週年慶的暖場演唱，向天微責無旁貸同行來幫忙，兩人倉皇找着</p>

2.::first-letter塊級首字母

解釋：塊級元素的首行字母。

::first-letter {
    color:  red;
}

<p>dfhhfewiogiweoghpwghoiwhg</p>

3.::before文本前插入

解釋：在文本前插入內容。

a::before {
    content:  '點擊-';
}

<a href="http://www.baidu.com">這裏</a>

4.::after文本後插入

解釋：在文本後插入內容。

a::after {
    content:  '-請進';
}

<a href="http://www.baidu.com">這裏</a>

::selection解釋：當選擇文字時觸發選擇。CSS3版本下的選擇器。

::selection{
    color: red;
}

<p>dfeihfhfowiqhfwqhfwpoqfjwqhf</p>

僞類選擇器

學習要點：
1.僞類選擇器總彙
2.結構性僞類選擇器
3.UI僞類選擇器
4.動態僞類選擇器
5.其餘僞類選擇器

本章主要探討HTML5中CSS選擇器中的僞類選擇器，和僞元素選擇器同樣，面向某種共同特徵來選擇元素。

一．僞類選擇器總彙

僞類選擇器分爲四種類型：結構性僞類、UI僞類、動態僞類和其餘僞類選擇器，具體以下：

選擇器　　名稱　　　　　　　　說明　　　　　　　　　　　　CSS版本

:root 　　　　根元素選擇器　　　　選擇文檔中的根元素 3

:first-child 　　子元素選擇器　　　　　　　　選擇元素中第一個子元素 2

:last-child 　　子元素選擇器　　選擇元素中最後一個子元素 3

:only-child 　　　子元素選擇器　　　　　　　　選擇元素中惟一子元素 3

:only-of-type 　　　　子元素選擇器　　　　　　　　選擇指定類型的惟一子元素 3

:nth-child(n) 　　子元素選擇器　　　　　　　　　選擇指定N個子元素 3

:enabled 　　 UI選擇器　　　　　　　　選擇啓用狀態的元素　　　 3

:disabled 　　 UI選擇器　　　　　　　　選擇禁用狀態的元素　　　 3

:checked 　　 UI選擇器　　　　　　　　選擇被選中input勾選元素 3

:default 　　 UI選擇器　　　　　　選擇默認元素　　　　 3

:valid 　　 UI選擇器　　　　　　　　驗證有效選擇input元素　　　 3

:invalid 　　　　UI選擇器　　　　　　　　　驗證無效選擇input元素　　　 3

:required 　　 UI選擇器　　　　　　　　有required屬性選擇元素　　 3

:optional 　　 UI選擇器　　　　　　　　無required屬性選擇元素　　　 3

:lin 　　　　動態選擇器　　　　　　　　未訪問的超連接元素 1

:visited 　　　　動態選擇器　　　　　　　　已訪問的超連接元素　　　 1

:hover 　　　　動態選擇器　　　　　　　　懸停在超連接上的元素　　　2

:active 　　　　動態選擇器　　　　　　　　激活超連接上的元素　　　 2

:foucs 　　　　動態選擇器　　　　　　　　獲取焦點的元素　　　　 2

:not 　　　　其餘選擇器　　　　　　　　否認選擇的元素　　　　 3

:empty 　　其餘選擇器　　　　　　　　選擇沒有任何內容的元素　 3

:lang 　　　　其餘選擇器　　　　　　　　選取包含lang屬性的元素　　 2

:target 　　　　其餘選擇器　　　　　　　　選取URL片斷標識指向元素　 3

二．結構性僞類選擇器

結構性僞類選擇器可以根據元素在文檔中的位置選擇元素。這類元素都有一個前綴（:）。

1.根元素選擇器

解釋：匹配文檔中的根元素，基本不怎麼用，由於老是返回<html>元素。

:root{
    border: 1px solid red;
}

<p>文本</p>

2.子元素選擇器

解釋：選擇第一個子元素。

ul > li:first-child {
    color: red;
}

<ul>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
</ul>

解釋：選擇最後一個子元素。

ul > li:last-child {
    color: red;
}

<ul>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
</ul>

解釋：選擇只有一個子元素的那個子元素。

ul > li:only-child {
    color: red;
}

<ul>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
</ul>
<ul>
    <li>列表1</li>
</ul>

解釋：選擇只有一個指定類型的子元素的那個子元素。也就是一個元素下的子元素只有一個的匹配

div > p:only-of-type {
    color: red;
}

<div>
    <p>這是段落</p>
    <p>這是另一段落</p>
</div>
<div>
    <p>這是段落</p>
    <span>這是一個區域</span>
</div>

3.:nth-child(n)系列

解釋：選擇子元素的第二個元素。

ul > li:nth-child(2) {
    color: red;
}

<ul>
    <li>列表1</li>
    <li>列表1</li>
    <li>列表1</li>
</ul>

解釋：選擇子元素倒數第二個元素。

ul > li:nth-last-child(2) {
    color: red;
}

<ul>
    <li>列表1</li>
    <li>列表1</li>
    <li>列表1</li>
    <li>列表1</li>
    <li>列表1</li>
    <li>列表1</li>
</ul>

解釋：選擇特定子元素的第二個元素。

div > p:nth-of-type(2) {
    color: red;
}

<div>
    <p>這是一個段落</p>
    <p>這是一個段落</p>
    <p>這是一個段落</p>
    <p>這是一個段落</p>
</div>

解釋：選擇特定子元素的倒數第二個元素。

div > p:nth-last-of-type(2) {
    color: red;
}

<div>
    <p>這是一個段落</p>
    <p>這是一個段落</p>
    <p>這是一個段落</p>
    <p>這是一個段落</p>
    <p>這是一個段落</p>
    <p>這是一個段落</p>
    <p>這是一個段落</p>
    <p>這是一個段落</p>
    <p>這是一個段落</p>
</div>

二．UI僞類選擇器

UI僞類選擇器是根據元素的狀態匹配元素。用於表單的屬性值

解釋：:enabled選擇啓用狀態的表單元素。如輸入框爲啓用狀態的

input:enabled{
    border: 1px solid red;
}

<form>
    <input type="text" disabled> //禁用輸入框
    <input type="text">
</form>

:disabled解釋：選擇禁用狀態的元素。如輸入框爲disabled禁用狀態的

input:disabled{
    border: 1px solid red;
}

<form>
    <input type="text" disabled>
    <input type="text">
</form>

:checked解釋：選擇勾選的input元素。

input:checked{
    background-color: #fe1c23;
}

<form>
    <input type="checkbox">
    <input type="checkbox" checked="checked"> <!--默認勾選-->
</form>

:default解釋：從一組相似的元素中選擇默認元素。好比input被勾選的即默認的。

input:default{
    display: none;
}

<form>
    <input type="checkbox">
    <input type="checkbox" checked="checked"> <!--默認勾選-->
</form>

:valid和:invalid解釋：輸入驗證合法與不合法顯示時選擇的元素。

/*合法*/
input:valid {
    border: 1px solid #3cff26;
}
/*不合法*/
input:invalid {
    border: 1px solid #ff272d;
}

<form>
    <input type="text" required>
    <input type="text" required>
    <button>提交</button>
</form>

:required和:optional解釋：根據是否具備required屬性選擇元素。也就是必填項和非必填項控制

/*必填*/
input:required {
    border: 1px solid #ff1822;
}
/*非必填*/
input:optional {
    border: 1px solid #3cff26;
}

<form>
    <input type="text" required>
    <input type="text">
    <button>提交</button>
</form>

三．動態僞類選擇器 ,控制超連接

動態僞類選擇器根據條件的改變匹配元素。

:link和:visited

解釋：:link 表示未訪問過的超連接，:visited表示已訪問過的超連接。

a:link {
    color: red;
}
a:visited {
    color: orange;
}

<a href="http://www.baidu.com">百度</a>
<a href="http://www.360.com">360</a>

:hover

解釋：表示鼠標懸停在超連接上。

a:hover {
    color: #19ff48;
}

<a href="http://www.baidu.com">百度</a>
<a href="http://www.360.com">360</a>

:active

解釋：表示鼠標按下激活超連接時。

a:active {
    color: #ff272d;
}

<a href="http://www.baidu.com">百度</a>
<a href="http://www.360.com">360</a>

:focus解釋：表示得到焦點時。也就是文本框鼠標點擊等待輸入文本時

input:focus {
    border: 8px solid red;
}

<input type="text">

四．其餘僞類選擇器

:not解釋：否認選擇器，反選。

a:not([href*="baidu"]) {
    color: red;
}

<a href="http://www.baidu.com">baidu</a>
<a href="http://www.360.com">360</a>
<a href="http://www.jxiou.com">叫賣錄音網</a>

:empty解釋：匹配沒有任何內容的元素。

p:empty{
    border: 8px solid red;
}

<b>加粗</b>
<p></p>
<b>加粗</b>

:lang 解釋：選擇包含lang屬性，屬性值前綴爲en的元素。和屬性選擇器匹配結果一致。也就是設置語言的選擇器

:lang(en){
    color: red;
}

<b>加粗</b>
<p lang="en-us">html5</p>
<b>加粗</b>

:target 解釋：定位到錨點時，選擇此元素。定位到錨點是受控制

:target{
    color: red;
}

<a id="jx">錨點</a>

相關標籤/搜索

每日一句

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