天天看點
傳回

CSS的僞類與僞元素的差別

僞類包含兩種：狀态僞類和結構性僞類。

狀态僞類 是基于元素目前狀态進行選擇的。在與使用者的互動過程中元素的狀态是動态變化的，是以該元素會根據其狀态呈現不同的樣式。當元素處于某狀态時會呈現該樣式，而進入另一狀态後，該樣式也會失去。
:link 應用于未被通路過的連結；
:hover 應用于滑鼠懸停到的元素；
:active 應用于被激活的元素；
:visited 應用于被通路過的連結，與:link互斥。
:focus 應用于擁有鍵盤輸入焦點的元素。
結構性僞類 css3新增選擇器，利用dom樹進行元素過濾，通過文檔結構的互相關系來比對元素，能夠減少class和id屬性的定義，使文檔結構更簡潔。
:first-child 選擇某個元素的第一個子元素；
:last-child 選擇某個元素的最後一個子元素；
:nth-child() 選擇某個元素的一個或多個特定的子元素；
:nth-last-child() 選擇某個元素的一個或多個特定的子元素，從這個元素的最後一個子元素開始算；
:nth-of-type() 選擇指定的元素；
:nth-last-of-type() 選擇指定的元素，從元素的最後一個開始計算；
:first-of-type 選擇一個上級元素下的第一個同類子元素；
:last-of-type 選擇一個上級元素的最後一個同類子元素；
:only-child 選擇的元素是它的父元素的唯一一個子元素；
:only-of-type 選擇一個元素是它的上級元素的唯一一個相同類型的子元素；
:empty 選擇的元素裡面沒有任何内容。
表單相關僞類
:checked 比對被選中的input元素，這個input元素包括radio和checkbox；
:default 比對預設選中的元素，例如：送出按鈕總是表單的預設按鈕；
:disabled 比對禁用的表單元素
:empty 比對沒有子元素的元素。如果元素中含有文本節點、HTML元素或者一個空格，則:empty不能比對這個元素；
:enabled 比對沒有設定disabled屬性的表單元素；
:in-range 比對在指定區域内元素；
:out-of-range 與:in-range相反，它比對不在指定區域内的元素；
:indeterminate indeterminate的英文意思是“不确定的”。當某組中的單選框或複選框還沒有選取狀态時，:indeterminate比對該組中所有的單選框或複選框；
:valid　 比對條件驗證正确的表單元素；
:invalid 與:valid相反，比對條件驗證錯誤的表單元素；
:optional 比對是具有optional屬性的表單元素。當表單元素沒有設定為required時，即為optional屬性；
:required 比對設定了required屬性的表單元素；
:read-write 比對處于編輯狀态的元素。input，textarea和設定了contenteditable的HTML元素擷取焦點時即處于編輯狀态；
:scope(處于試驗階段) 比對處于style作用域下的元素。當style沒有設定scope屬性時，style内的樣式會對整個html起作用；

僞元素是對元素中的特定内容進行操作，而不是描述狀态。它的操作層次比僞類更深一層，是以動态性比僞類低很多。實際上，僞元素就是選取某些元素前面或後面這種普通選擇器無法完成的工作。控制的内容和元素是相同的，但它本身是基于元素的抽象，并不存在于文檔結構中！常見的僞元素選擇器包括：

僞元素
:first-letter 選擇元素文本的第一個字（母）。
:first-line 選擇元素文本的第一行。
:before 在元素内容的最前面添加新内容。
:after 在元素内容的最後面添加新内容。

 注：僞元素雖然強大，但是還是有一些特定的标簽是不支援僞元素 before 和 after 的。諸如 <img> 、<input>、<iframe>，這幾個标簽是不支援類似 img::before 這樣使用。究其原因，要想要标簽支援僞元素，需要這個元素是要可以插入内容的，也就是說這個元素要是一個容器，而 input，img，iframe 等元素都不能包含其他元素，是以不能通過僞元素插入内容。

注意事項

有時你會發現僞類元素使用了兩個冒号 (::) 而不是一個冒号 (:)，這是 CSS3 規範中的一部分要求，目的是為了區分僞類和僞元素，大多數浏覽器都支援這兩種表示方式。單冒号(:)用于 CSS3 僞類，雙冒号(::)用于 CSS3 僞元素。對于 CSS2 中已經有的僞元素，例如 :before，單冒号和雙冒号的寫法 ::before 作用是一樣的。

是以，如果你的網站隻需要相容 webkit、firefox、opera 等浏覽器，建議對于僞元素采用雙冒号的寫法，如果不得不相容 IE 浏覽器，還是用 CSS2 的單冒号寫法比較安全。

僞元素的應用

如果父元素的所有子元素都是浮動的，父元素的高度則無法撐開。可以通過對父元素添加after僞類撐開父元素高度，因為after就是其最後一個子元素。

.clear:after {
    content: '';
    display: block;
    clear: both;
}

在标簽内容的前後添加額外内容

CSS的僞類與僞元素的差別
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>測試</title>
        <style>
            .content {
                color: block;
                width: 300px;
                padding: 10px;
                border: 1px solid gray;
            }
            .content::before {
                content: '我在前面啊';
                margin-right: 10px;
                padding: 5px;
                color: red;
                border: 2px dashed blue;
                display: inline-block;
            }
            .content::after {
                content: '我在後面啊';
                margin-left: 10px;
                padding: 5px;
                color: red;
                border: 2px dashed blue;
                display: inline-block;
            }
        </style>
    </head>
    <body>
      <div class="content">這裡是内容</div>
    </body>
</html>

CSS實作遞增序号功能，多用于建立目錄。

CSS的僞類與僞元素的差別
<html>
    <head>
        <style type="text/css">
            body {
                width: 400px;
				height: 500px;
                padding: 10px;
                counter-reset: section;
                border: 1px solid gray;
            }
            h3 {
                counter-reset: subsection;
            }
            h3:before {
                counter-increment: section;
                content: "第 " counter(section) " 章：";
            }
            h4:before {
                counter-increment: subsection;
                content: counter(section) "." counter(subsection) " ";
                margin-left: 40px;
            }
        </style>
    </head>

    <body>
        <h3>可視化格式模型</h3>
        <h4>盒模型概述</h4>
        <h4>定位概述</h4>

        <h3>背景圖像效果</h3>
        <h4>圓角框</h4>
        <h4>投影</h4>
        <h4>不透明度</h4>

        <h3>布局</h3>
        <h4>計劃布局</h4>
        <h4>設定基本結構</h4>
        <h4>固定寬度、流式和彈性布局</h4>
    </body>
</html>

通過僞元素實作形變：

CSS的僞類與僞元素的差別
<html>
    <head>
        <style type="text/css">
            .transform {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
                width: 160px;
                padding: 60px;
                text-align: center;
                color: white;
                font-size: 200%;
                background: gray;
            }
            .transform::before {
                content: "";
                position: absolute;
                top: 0; right: 0; bottom: 0; left: 0;
                transform: perspective(50px) scaleY(2) rotateX(45deg);
                transform-origin: bottom;
                background: red;
                z-index: -1;
                width: 100px;
                border-radius: 50%;
            }
        </style>
    </head>

    <body>
        <div class="transform">
        </div>
    </body>
</html>

總結

僞元素的本質是在不增加dom結構的基礎上添加的一個元素，在用法上跟真正的dom無本質差別。普通元素能實作的效果，僞元素都可以。有些用僞元素效果更好，代碼更精簡。

css 僞類 僞元素
上一篇: CSS中僞類和僞元素的差別
下一篇: css中僞類與僞元素的差別

繼續閱讀