溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

如何進(jìn)行css偽元素選擇器的分析

發(fā)布時(shí)間：2021-11-26 10:43:08 來源：億速云 閱讀：159 作者：柒染 欄目：開發(fā)技術(shù)

本篇文章給大家分享的是有關(guān)如何進(jìn)行css偽元素選擇器的分析，小編覺得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>偽類</title>
<style>
/*
偽元素選擇器：

偽元素的效果是需要通過添加一個(gè)實(shí)際的元素才能達(dá)到的。
CSS中有如下四種偽元素選擇器：
· :first-line:為某個(gè)元素的第一行文字使用樣式；
· :first-letter:為某個(gè)元素中的文字的首字母或第一個(gè)字使用樣式；
· :before:在某個(gè)元素之前插入一些內(nèi)容；
· :after: 在某個(gè)元素之后插入一些內(nèi)容；
*/
p:first-line{ background-color:yellow;}
p:first-letter{color:blue;}
p:before{content:"這是：";}
p:after{content:"！結(jié)束了";}
  /*
偽類選擇器：

 和一般的DOM中的元素樣式不一樣，它并不改變?nèi)魏蜠OM內(nèi)容。
    只是插入了一些修飾類的元素，這些元素對于用戶來說是可見的，但是對于DOM來說不可見。
    偽類的效果可以通過添加一個(gè)實(shí)際的類來達(dá)到。

常用的偽類選擇器是使用在a元素上的幾種，`如a:link|a:visited|a:hover|a:active`
提示：在 CSS 定義中，a:hover 必須被置于 a:link 和 a:visited 之后，才是有效的。
提示：在 CSS 定義中，a:active 必須被置于 a:hover 之后，才是有效的。

結(jié)構(gòu)性偽類選擇器
:root()選擇器，從字面上我們就可以很清楚的理解是根選擇器，他的意思就是匹配元素E所在文檔的根元素。在HTML文檔中，根元素始終是<html>?！?root”選擇器等同于<html>元素
:not()選擇器稱為否定選擇器，和jQuery中的:not選擇器一模一樣，可以選擇除某個(gè)元素之外的所有元素。
:empty()選擇器表示的就是空。用來選擇沒有任何內(nèi)容的元素，這里沒有內(nèi)容指的是一點(diǎn)內(nèi)容都沒有，哪怕是一個(gè)空格。
:target()選擇器來對頁面某個(gè)target元素(該元素的id被當(dāng)做頁面中的超鏈接來使用)指定樣式，該樣式只在用戶點(diǎn)擊了頁面中的超鏈接，并且跳轉(zhuǎn)到target元素后起作用
:first-child()選擇器表示的是選擇父元素的第一個(gè)子元素的元素E。簡單點(diǎn)理解就是選擇元素中的第一個(gè)子元素，記住是子元素，而不是后代元素。
:nth-child()選擇某個(gè)元素的一個(gè)或多個(gè)特定的子元素；
:nth-child(length);/*參數(shù)是具體數(shù)字
:nth-child(n);/*參數(shù)是n,n從0開始計(jì)算
:nth-child(n*length)/*n的倍數(shù)選擇，n從0開始算
:nth-child(n+length);/*選擇大于length后面的元素
:nth-child(-n+length)/*選擇小于length前面的元素
:nth-child(n*length+1);/*表示隔幾選一
//上面length為整數(shù)
:nth-last-child()從某父元素的最后一個(gè)子元素開始計(jì)算，來選擇特定的元素。
: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>
偽元素選擇器：偽元素的效果是需要通過添加一個(gè)實(shí)際的元素才能達(dá)到的。CSS中有如下四種偽元素選擇器：
:first- line:為某個(gè)元素的第一行文字使用樣式；
· :first-letter:為某個(gè)元素中的文字的首字母或第一個(gè)字使用樣式；
· :before:在某個(gè)元素之前插入一些內(nèi)容；
· :after: 在某個(gè)元素之后插入一些內(nèi)容；
</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>

以上就是如何進(jìn)行css偽元素選擇器的分析，小編相信有部分知識點(diǎn)可能是我們?nèi)粘９ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

css
AI
助
手