溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章給大家分享的是有關如何進行css偽元素選擇器的分析，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>偽類</title>
<style>
/*
偽元素選擇器：
偽元素的效果是需要通過添加一個實際的元素才能達到的。
CSS中有如下四種偽元素選擇器：
· :first-line:為某個元素的第一行文字使用樣式；
· :first-letter:為某個元素中的文字的首字母或第一個字使用樣式；
· :before:在某個元素之前插入一些內容；
· :after: 在某個元素之后插入一些內容；
*/
p:first-line{ background-color:yellow;}
p:first-letter{color:blue;}
p:before{content:"這是：";}
p:after{content:"！結束了";}
/*
偽類選擇器：
和一般的DOM中的元素樣式不一樣，它并不改變任何DOM內容。
只是插入了一些修飾類的元素，這些元素對于用戶來說是可見的，但是對于DOM來說不可見。
偽類的效果可以通過添加一個實際的類來達到。
常用的偽類選擇器是使用在a元素上的幾種，`如a:link|a:visited|a:hover|a:active`
提示：在 CSS 定義中，a:hover 必須被置于 a:link 和 a:visited 之后，才是有效的。
提示：在 CSS 定義中，a:active 必須被置于 a:hover 之后，才是有效的。
結構性偽類選擇器
:root()選擇器，從字面上我們就可以很清楚的理解是根選擇器，他的意思就是匹配元素E所在文檔的根元素。在HTML文檔中，根元素始終是<html>。“:root”選擇器等同于<html>元素
:not()選擇器稱為否定選擇器，和jQuery中的:not選擇器一模一樣，可以選擇除某個元素之外的所有元素。
:empty()選擇器表示的就是空。用來選擇沒有任何內容的元素，這里沒有內容指的是一點內容都沒有，哪怕是一個空格。
:target()選擇器來對頁面某個target元素(該元素的id被當做頁面中的超鏈接來使用)指定樣式，該樣式只在用戶點擊了頁面中的超鏈接，并且跳轉到target元素后起作用
:first-child()選擇器表示的是選擇父元素的第一個子元素的元素E。簡單點理解就是選擇元素中的第一個子元素，記住是子元素，而不是后代元素。
:nth-child()選擇某個元素的一個或多個特定的子元素；
:nth-child(length);/*參數是具體數字
:nth-child(n);/*參數是n,n從0開始計算
:nth-child(n*length)/*n的倍數選擇，n從0開始算
:nth-child(n+length);/*選擇大于length后面的元素
:nth-child(-n+length)/*選擇小于length前面的元素
:nth-child(n*length+1);/*表示隔幾選一
//上面length為整數
:nth-last-child()從某父元素的最后一個子元素開始計算，來選擇特定的元素。
:nth-of-type(n)”選擇器來定位于父元素中某種類型的子元素
*/
:not(p){color:red;}
:empty{width:100px;height:20px;background:red;display: inline-block;}
:target{background:blue;}
div p:first-child{background:gray;}
div p:nth-child(2n){background:yellow;}
</style>
</head>
<body>
<p>
偽元素選擇器：偽元素的效果是需要通過添加一個實際的元素才能達到的。CSS中有如下四種偽元素選擇器：
:first- line:為某個元素的第一行文字使用樣式；
· :first-letter:為某個元素中的文字的首字母或第一個字使用樣式；
· :before:在某個元素之前插入一些內容；
· :after: 在某個元素之后插入一些內容；
</p>
<a href="#A">AAAAAAAA</a>
<a href="#B">BBBBBBBB</a>
<div id="A">AAAAAA</div>
<div id="B">BBBBBBB</div>
<!--偽類-->
<div>
<p>1111</p>
<p>2222</p>
<p>333333</p>
<p>444444</p>
</div>
</body>
</html>
以上就是如何進行css偽元素選擇器的分析，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
