總結僞類與僞元素

時間  2019-11-08
標籤 總結 元素 简体版
原文   原文鏈接

熟悉前端的人都會聽過css的僞類與僞元素，然而大多數的人都會將這二者混淆。本文從解析僞類與僞元素的含義出發，區分這二者的區別，而且列出大部分僞類與僞元素的具體用法，即便你有用過僞類與僞元素，但裏面總有一兩個你沒見過的吧。css

　　1. 僞類與僞元素html

　　先說一說爲何css要引入僞元素和僞類，如下是css2.1 Selectors章節中對僞類與僞元素的描述：前端

　　CSS introduces the concepts of pseudo-elements and pseudo-classes  to permit formatting based on information that lies outside the document tree.web

　　直譯過來就是：css引入僞類和僞元素概念是爲了格式化文檔樹之外的信息。也就是說，僞類和僞元素是用來修飾不在文檔樹中的部分，好比，一句話中的第一個字母，或者是列表中的第一個元素。下面分別對僞類和僞元素進行解釋：瀏覽器

　　僞類用於當已有元素處於的某個狀態時，爲其添加對應的樣式，這個狀態是根據用戶行爲而動態變化的。好比說，當用戶懸停在指定的元素時，咱們能夠經過:hover來描述這個元素的狀態。雖然它和普通的css類類似，能夠爲已有的元素添加樣式，可是它只有處於dom樹沒法描述的狀態下才能爲元素添加樣式，因此將其稱爲僞類。app

　　僞元素用於建立一些不在文檔樹中的元素，併爲其添加樣式。好比說，咱們能夠經過:before來在一個元素前增長一些文本，併爲這些文本添加樣式。雖然用戶能夠看到這些文本，可是這些文本實際上不在文檔樹中。dom

　　2. 僞類與僞元素的區別ide

　　這裏經過兩個例子來講明二者的區別。網站

　　下面是一個簡單的html列表片斷：ui

<ul>
    <li>我是第一個</li>
    <li>我是第二個</li>
</ul>

 　　若是想要給第一項添加樣式，能夠在爲第一個<li>添加一個類，並在該類中定義對應樣式：

　　HTML:

<ul>
    <li class="first-item">我是第一個</li>
    <li>我是第二個</li>
</ul>

 　　CSS:

li.first-item {
    color: orange
}

　　若是不用添加類的方法，咱們能夠經過給設置第一個<li>的:first-child僞類來爲其添加樣式。這個時候，被修飾的<li>元素依然處於文檔樹中。

　　HTML:

<ul>
    <li>我是第一個</li>
    <li>我是第二個</li>
</ul>

　　CSS:

li:first-child {
    color: orange
}

　　下面是另外一個簡單的html段落片斷：

<p>Hello World, and wish you have a good day!</p>

　　若是想要給該段落的第一個字母添加樣式，能夠在第一個字母中包裹一個<span>元素，並設置該span元素的樣式：

　　HTML:

<p><span class="first">H</span>ello World, and wish you have a good day!</p>

　　CSS:

.first {
    font-size: 5em;
}

　　若是不建立一個<span>元素，咱們能夠經過設置<p>的:first-letter僞元素來爲其添加樣式。這個時候，看起來好像是建立了一個虛擬的<span>元素並添加了樣式，但實際上文檔樹中並不存在這個<span>元素。

　　HTML:

<p>Hello World, and wish you have a good day!</p>

　　CSS:

p:first-letter {
    font-size: 5em;
}

　　從上述例子中能夠看出，僞類的操做對象是文檔樹中已有的元素，而僞元素則建立了一個文檔數外的元素。所以，僞類與僞元素的區別在於：有沒有建立一個文檔樹以外的元素。

　　3. 僞元素是使用單冒號仍是雙冒號？

　　CSS3規範中的要求使用雙冒號(::)表示僞元素，以此來區分僞元素和僞類，好比::before和::after等僞元素使用雙冒號(::)，:hover和:active等僞類使用單冒號(:)。除了一些低於IE8版本的瀏覽器外，大部分瀏覽器都支持僞元素的雙冒號(::)表示方法。

　　然而，除了少部分僞元素，如::backdrop必須使用雙冒號，大部分僞元素都支持單冒號和雙冒號的寫法，好比::after，寫成:after也能夠正確運行。

　　對於僞元素是使用單冒號仍是雙冒號的問題，w3c標準中的描述以下：

　　Please note that the new CSS3 way of writing pseudo-elements is to use a double colon, eg a::after { … }， to set them apart from pseudo-classes. You may see this sometimes in CSS. CSS3 however also still allows for single colon pseudo-elements, for the sake of backwards compatibility， and we would advise that you stick with this syntax for the time being.

　　大概的意思就是：雖然CSS3標準要求僞元素使用雙冒號的寫法，但也依然支持單冒號的寫法。爲了向後兼容，咱們建議你在目前仍是使用單冒號的寫法。

　　實際上，僞元素使用單冒號仍是雙冒號很難說得清誰對誰錯，你能夠按照我的的喜愛來選擇某一種寫法。

　　4. 僞類與僞元素的具體用法

　　這一章以含義解析和例子的方式列出大部分的僞類和僞元素的具體用法。下面是根據用途分類的僞類總結圖和根據冒號分類的僞元素總結圖：

僞類僞元素　　某些僞類或僞元素仍然處於試驗階段，在使用前建議先在Can I Use等網站查一查其瀏覽器兼容性。處於試驗階段的僞類或僞元素會在標題中標註。

　　僞類

　　狀態

　　因爲狀態僞類的用法你們都十分熟悉，這裏就不用例子說明了。

　　1 :link

　　選擇未訪問的連接

　　2 :visited

　　選擇已訪問的連接

　　3 :hover

　　選擇鼠標指針浮動在其上的元素

　　4 :active

　　選擇活動的連接

　　5 :focus

　　選擇獲取焦點的輸入字段

　　結構化

　　1 :not

　　一個否認僞類，用於匹配不符合參數選擇器的元素。

　　以下例，除了第一個<li>元素外，其餘<li>元素的文本都會變爲橙色。

　　HTML:

<ul>
    <li class="first-item">一些文本</li>
    <li>一些文本</li>
    <li>一些文本</li>
    <li>一些文本</li>
</ul>

　　CSS:

li:not(.first-item) {
    color: orange;
}

　　2 :first-child

　　匹配元素的第一個子元素。

　　以下例，第一個<li>元素的文本會變爲橙色。

　　HTML:

<ul>
    <li>這裏的文本是橙色的</li>
    <li>一些文本</li>
    <li>一些文本</li>
</ul>

　　CSS:

li:first-child {
    color: orange;
}

　　3 : last-child

　　匹配元素的最後一個子元素。

　　以下例，最後一個<li>元素的文本會變爲橙色。

　　HTML:

<ul>
    <li>一些文本</li>
    <li>一些文本</li>
    <li>這裏的文本是橙色的</li>
</ul>

　　CSS:

li:last-child {
    color: orange;
}

　　4 first-of-type

　　匹配屬於其父元素的首個特定類型的子元素的每一個元素。

　　以下例，第一個<li>元素和第一個<span>元素的文本會變爲橙色。

　　HTML:

<ul>
    <li>這裏的文本是橙色的</li>
    <li>一些文本 <span>這裏的文本是橙色的</span></li>
    <li>一些文本</li>
</ul>

　　CSS:

ul :first-of-type {
    color: orange;
}

　　5 :last-of-type

　　匹配元素的最後一個子元素。

　　以下例，最後一個<li>元素的文本會變爲橙色。

　　HTML:

<ul>
    <li>一些文本<span>一些文本</span> <span>這裏的文本是橙色的</span></li>
    <li>一些文本</li>
    <li>這裏的文本是橙色的</li>
</ul>

　　CSS:

ul :last-of-type {
    color: orange;
}

　　6 :nth-child

　　:nth-child根據元素的位置匹配一個或者多個元素，它接受一個an+b形式的參數，an+b匹配到的元素示例以下：

  • 1n+0，或n，匹配每個子元素。
  • 2n+0，或2n，匹配位置爲二、四、六、8…的子元素，該表達式與關鍵字even等價。
  • 2n+1匹配位置爲一、三、五、7…的子元素、該表達式與關鍵字odd等價。
  • 3n+4匹配位置爲四、七、十、13…的子元素。

　　以下例，有如下HTML列表：

<ol>
    <li>Alpha</li>
    <li>Beta</li>
    <li>Gamma</li>
    <li>Delta</li>
    <li>Epsilon</li>
    <li>Zeta</li>
    <li>Eta</li>
    <li>Theta</li>
    <li>Iota</li>
    <li>Kappa</li>
</ol>

　　CSS:

　　選擇第二個元素，」Beta」會變成橙色：

ol :nth-child(2) {
    color: orange;
}

　　選擇位置序號是2的倍數的元素，」Beta」， 「Delta」， 「Zeta」， 「kappa」會變成橙色:

ol :nth-child(2n) {
    color: orange;
}

　　選擇位置序號爲偶數的元素：

ol :nth-child(even) {
    color: orange;
}

　　選擇從第6個開始，位置序號是2的倍數的元素，」Zeta」， 「Theta」， 「Kappa」會變成橙色：

ol :nth-child(2n+6) {
    color: orange;
}

　　7 :nth-last-child

　　:nth-last-child與:nth-child類似，不一樣之處在於它是從最後一個子元素開始計數的。

　　8 :nth-of-type

　　:nth-of-type與nth-child類似，不一樣之處在於它是隻匹配特定類型的元素。

　　以下例，第二個<p>元素會變爲橙色。

　　HTML:

<article>
    <h1>我是標題</h1>
    <p>一些文本</p>
    <a href=""><img src="images/rwd.png" alt="Mastering RWD"></a>
    <p>這裏的文本是橙色的</p>
</article>

　　CSS:

p:nth-of-type(2) {
    color: orange;
}

　　9 :nth-last-type

　　:nth-last-of-type與nth-of-type類似，不一樣之處在於它是從最後一個子元素開始計數的。

　　10 :only-child

　　當元素是其父元素中惟一一個子元素時，:only-child匹配該元素。

　　HTML:

<ul>
    <li>這裏的文本是橙色的</li>
</ul>
 
<ul>
    <li>一些文本</li>
    <li>一些文本</li>
</ul>

　　CSS:

ul :only-child {
    color: orange;
}

　　11 :only-of-type

　　當元素是其父元素中惟一一個特定類型的子元素時，:only-child匹配該元素。

　　以下例，第一個ul元素只有一個li類型的元素，該li元素的文本會變爲橙色。

　　HTML:

<ul>
    <li>這裏的文本是橙色的</li>
    <p>這裏不是橙色</p>
</ul>
 
<ul>
    <li>一些文本</li>
    <li>一些文本</li>
</ul>

　　CSS:

li:only-of-type {
    color: orange;
}

　　12 :target

　　當URL帶有錨名稱，指向文檔內某個具體的元素時，:target匹配該元素。

　　以下例，url中的target命中id值爲target的article元素，article元素的背景會變爲黃色。

　　URL:

　　http://example.com/#target

　　HTML:

<article id="target">
    <h1><code>:target</code> pseudo-class</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit!</p>
</article>

　　CSS:

:target {
    background: yellow;
}

　　表單相關

　　1 :checked

　　:checked匹配被選中的input元素，這個input元素包括radio和checkbox。

　　以下例，當複選框被選中時，與其相鄰的<label>元素的背景會變成黃色。

　　HTML:

<input type="checkbox"/>
<label>我贊成</label>

　　CSS:

input:checked + label {
    background: yellow;
}

　　2 :default

　　:default匹配默認選中的元素，例如：提交按鈕老是表單的默認按鈕。

　　以下例，只有提交按鈕的背景變成了黃色。

　　HTML:

<form action="#">
    <button>重置</button>
    <button type="submit">提交</button>
</form>

　　CSS:

:default  {
    background: yellow;
}

　　3 :disabled

　　:disabled匹配禁用的表單元素。

　　以下例，被禁用input輸入框的透明度會變成50%。

　　HTML:

<input type="text" disabled/>

　　CSS:

:disabled {
    opacity: .5;
}

　　4 :empty

　　:empty匹配沒有子元素的元素。若是元素中含有文本節點、HTML元素或者一個空格，則:empty不能匹配這個元素。

　　以下例，:empty能匹配的元素會變爲黃色。

　　第一個元素中有文本節點，因此其背景不會變成黃色；

　　第二個元素中有一個空格，有空格則該元素不爲空，因此其背景不會變成黃色；

　　第三個元素中沒有任何內容，因此其背景會變成黃色；

　　第四個元素中只有一個註釋，此時該元素是空的，因此其背景會變成黃色；

　　HTML:

<div>這個容器裏的背景是橙色的</div>
<div> </div>
<div></div>
<div><!-- This comment is not considered content --></div>

　　CSS:

div {
    background: orange;
    height: 30px;
    width: 200px;
}
 
div:empty {
    background: yellow;
}

　　5 :enabled

　　:enabled匹配沒有設置disabled屬性的表單元素。

　　6 :in-range

　　:in-range匹配在指定區域內元素。

　　以下例，當數字選擇器的數字在5到10是，數字選擇器的邊框會設爲綠色。

　　HTML:

<input type="number" min="5" max="10">

　　CSS:

input[type=number] {
    border: 5px solid orange;
}
 
input[type=number]:in-range {
    border: 5px solid green;
}

　　7 :out-of-range

　　:out-of-range與:in-range相反，它匹配不在指定區域內的元素。

　　8 :indeterminate

　　indeterminate的英文意思是「不肯定的」。當某組中的單選框或複選框尚未選取狀態時，:indeterminate匹配該組中全部的單選框或複選框。

　　以下例，當下面的一組單選框沒有一個處於被選中時，與input相鄰的label元素的背景會被設爲橙色。

　　HTML:

<ul>
    <li>
        <input type="radio" name="list" id="option1">
        <label for="option1">Option 1</label>
    </li>
    <li>
        <input type="radio" name="list" id="option2">
        <label for="option2">Option 2</label>
    </li>
    <li>
        <input type="radio" name="list" id="option3">
        <label for="option3">Option 3</label>
    </li>
</ul>

　　CSS:

:indeterminate + label {
    background: orange;
}

　　9 :valid

　　:valid匹配條件驗證正確的表單元素。

　　以下例，當email輸入框內的值符合email格式時，輸入框的邊框會被設爲綠色。

　　HTML:

<input type="email"/>

　　CSS:

input[type=email]:valid {
    border: 1px solid green;
}

　　10 :invalid

　　:invalid與:valid相反，匹配條件驗證錯誤的表單元素。

　　11 :optional

　　:optional匹配是具備optional屬性的表單元素。當表單元素沒有設置爲required時，即爲optional屬性。

　　以下例，第一個input的背景不會被設爲黃色，第二個input的背景會被設爲黃色。

　　HTML:

<input type="text" required />
<input type="text" />

　　CSS:

:optional {
    background: yellow;
}

　　12 :required

　　:required與:optional相反匹配設置了required屬性的表單元素。

　　13 :read-only

　　:read-only匹配設置了只讀屬性的元素，表單元素能夠經過設置「readonly」屬性來定義元素只讀。

　　以下例，input元素的背景會被設爲黃色。

　　HTML:

<input type="text" value="I am read only" readonly>

　　CSS:

input:read-only {
    background-color: yellow;
}

　　14 :read-write

　　:read-write匹配處於編輯狀態的元素。input，textarea和設置了contenteditable的HTML元素獲取焦點時即處於編輯狀態。

　　以下例，input輸入框和富文本框獲

:read-write:focus {
    background: yellow;
}

取焦點時，背景變成黃色。

　　HTML:

<input type="text" value="獲取焦點時背景變黃"/>
 
<div class="editable" contenteditable>
    <h1>點擊這裏能夠編輯</h1>
    <p>獲取焦點時背景變黃</p>
</div>

　　CSS:

:read-write:focus {
    background: yellow;
}

　　15 :scope(處於試驗階段)

　　:scope匹配處於style做用域下的元素。當style沒有設置scope屬性時，style內的樣式會對整個html起做用。

　　以下例，第二個section中的元素的文本會變爲斜體。

　　HTML:

<article>
    <section>
        <h1>很正常的一些文本</h1>
        <p>很正常的一些文本</p>
    </section>
    <section>
        <style scoped>
            :scope {
                font-style: italic;
            }
        </style>
        <h1>這裏的文本是斜體的</h1>
        <p>這裏的文本是斜體的</p>
    </section>
</article>

　　注：目前支持這個僞類的瀏覽器只有火狐。

　　語言相關

　　1 :dir(處於實驗階段)

　　:dir匹配指定閱讀方向的元素，當HTML元素中設置了dir屬性時該僞類才能生效。現時支持的閱讀方向有兩種：ltr（從左往右）和rtl（從右往左）。目前，只有火狐瀏覽器支持:dir僞類，並在火狐瀏覽器中使用時須要添加前綴( -moz-dir() )。

　　以下例，p元素中的阿拉伯語（阿拉伯語是從右往左閱讀的）文本會變成橙色。

　　HTML:

<article dir="rtl">
<p>التدليك واحد من أقدم العلوم الصحية التي عرفها الانسان والذي يتم استخدامه لأغراض الشفاء منذ ولاده الطفل.</p>
</article>

　　CSS:

/* prefixed */
article :-moz-dir(rtl) {
    color: orange;
}
 
/* unprefixed */
article :dir(rtl) {
    color: orange;
}

　　以下例，p元素中的英語文本會變成藍色

　　HTML:

<article dir="ltr">
    <p>اIf you already know some HTML and CSS and understand the principles of responsive web design, then this book is for you.</p>
</article>

　　CSS:

article :-moz-dir(ltr) {
    color: blue;
}
 
/* unprefixed */
article :dir(ltr) {
    color: blue;
}

　　2 :lang

　　:lang匹配設置了特定語言的元素，設置特定語言能夠經過爲了HTML元素設置lang=」」屬性，設置meta元素的charset=」」屬性，或者是在http頭部上設置語言屬性。

　　實際上，lang=」」屬性不僅能夠在html標籤上設置，也能夠在其餘的元素上設置。

　　以下例，分別給不一樣的語言設置不一樣的引用樣式：

　　HTML:

<article lang="en">
    <q>Lorem ipsum dolor sit amet.</q>
</article>
<article lang="fr">
    <q>Lorem ipsum dolor sit amet.</q>
</article>
<article lang="de">
    <q>Lorem ipsum dolor sit amet.</q>
</article>

　　CSS:

:lang(en) q { quotes: '「' '」'; }
:lang(fr) q { quotes: '«' '»'; }
:lang(de) q { quotes: '»' '«'; }

　　其餘

　　1 :root

　　:root匹配文檔的根元素。通常的html文件的根元素是html元素，而SVG或XML文件的根元素則多是其餘元素。

　　以下例，將html元素的背景設置爲橙色

:root {
    background: orange;
}

　　2. :fullscreen

　　:fullscreen匹配處於全屏模式下的元素。全屏模式不是經過按F11來打開的全屏模式，而是經過Javascript的Fullscreen API來打開的，不一樣的瀏覽器有不一樣的Fullscreen API。目前，:fullscreen須要添加前綴才能使用。

　　以下例，當處於全屏模式時，h1元素的背景會變成橙色

　　HTML:

<h1 id="element">在全屏模式下，這裏的文本的背景會變成橙色.</h1>
<button>進入全屏模式!</button>

　　JAVASCRIPT:

var docelem = document.getElementById('element');
var button = document.querySelector('button');
button.onclick = function() {
 
    if (docelem.requestFullscreen) {
        docelem.requestFullscreen();
    }else if (docelem.webkitRequestFullscreen) {
        docelem.webkitRequestFullscreen();
    } else if(docelem.mozRequestFullScreen) {
        docelem.mozRequestFullScreen();
    } else if(docelem.msRequestFullscreen) {
        docelem.msRequestFullscreen();
    }
}

　　CSS:

h1:fullscreen {
    background: orange;
}
 
h1:-webkit-full-screen {
    background: orange;
}
 
h1:-moz-full-screen {
    background: orange;
}
 
h1:-ms-fullscreen {
    background: orange;
}

　　僞元素

　　1 ::before/:before

　　:before在被選元素前插入內容。須要使用content屬性來指定要插入的內容。被插入的內容實際上不在文檔樹中。

　　HTML:

<h1>World</h1>

　　CSS:

h1:before {
    content: "Hello ";
}

　　2 ::after/:after

　　:after在被元素後插入內容，其用法和特性與:before類似。

　　3 ::first-letter/:first-letter

　　:first-letter匹配元素中文本的首字母。被修飾的首字母不在文檔樹中。

　　CSS:

h1:before {
    content: "Hello ";
}

　　4 ::first-line/:first-line

　　:first-line匹配元素中第一行的文本。這個僞元素只能用在塊元素中，不能用在內聯元素中。

　　CSS:

p:first-line {
    background: orange;
}

　　5 ::selection

　　::selection匹配用戶被用戶選中或者處於高亮狀態的部分。在火狐瀏覽器使用時須要添加-moz前綴。該僞元素只支持雙冒號的形式。

　　CSS:

::-moz-selection {
    color: orange;
    background: #333;
}
 
::selection  {
    color: orange;
    background: #333;
}

　　6 ::placeholder

　　::placeholder匹配佔位符的文本，只有元素設置了placeholder屬性時，該僞元素才能生效。

　　該僞元素不是CSS的標準，它的實現可能在未來會有所改變，因此要決定使用時必須謹慎。

　　在一些瀏覽器中（IE10和Firefox18及其如下版本）會使用單冒號的形式。

　　HTML:

<input type="email" placeholder="name@domain.com">

　　CSS:

input::-moz-placeholder {
    color:#666;
}
 
input::-webkit-input-placeholder {
    color:#666;
}
 
/* IE 10 only */
input:-ms-input-placeholder {
    color:#666;
}
 
/* Firefox 18 and below */
input:-moz-input-placeholder {
    color:#666;
}

　　7 ::backdrop(處於試驗階段)

　　::backdrop用於改變全屏模式下的背景顏色，全屏模式的默認顏色爲黑色。該僞元素只支持雙冒號的形式

　　HTML:

<h1 id="element">This heading will have a solid background color in full-screen mode.</h1>
<button onclick="var el = document.getElementById('element'); el.webkitRequestFullscreen();">Trigger full screen!</button>

　　CSS:

h1:fullscreen::backdrop {
    background: orange;
}

　　參考文章

　　1.  An Ultimate Guide To CSS Pseudo-Classes And Pseudo-Elements

　　2.  CSS僞類與CSS僞元素的區別及由來 

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程