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;}
css选择器分为哪几类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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。