<!DOCTYPE html>
<html lang="zh">
<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">獨占</a>
<a href="#B">獨占網絡</a>
<div id="A">深圳網站建設</div>
<div id="B">深圳網站建設-獨占</div>
<!--偽類-->
<div>
<p>獨占</p>
<p>獨占網絡</p>
<p>深圳網站建設</p>
<p>深圳網站建設-獨占</p>
</div>
</body>
</html>
掃碼咨詢
掃碼咨詢