伪类与伪元素，并且指出了伪类与伪元素选择器的区别是::before和::after这两个伪元素实质上要创建新的元素(标签)，而伪类都不会创建新的元素的，另外，伪元素的写法是两个::，伪类是一个:，有时候浏览器也支持伪元素使用一个:的写法，不过为了区别两者，我还是建议伪元素写两个":",而伪类写一个":"。
以往的行文匆匆没有来得及讲解一两个例子，这次文章我就挑了两个例子来看看，这次涉及到的伪类有
:root选中的是html这个根元素、
:target指的是当我们使用锚点连接的时候，可以使用这个选择器突出显示当前活动的锚目标、
:empty指的是没有内容的元素，比如li:empty选中的是里面没有内容的li标签、
:not(选择器)比如li.not(.box)指的是没有box这个css类的li标签，涉及到的伪元素有
::first-line指的是第一行、
::first-letter指的是第一个字母。
如有下面的html代码和css代码：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>伪类与伪元素</title> </head> <body> <a href="#one">one</a> <a href="#two">two</a> <ul> <li class="first">苹果</li> <li></li> <li>例子</li> <li>香蕉</li> </ul> <div id="one"> oneoneoneoneoneone<br> oneoneoneoneoneone<br> oneoneoneoneoneone<br> </div> <div id="two"> twotwotwotwotwotwotwo<br> twotwotwotwotwotwotwo<br> twotwotwotwotwotwotwo<br> </div> </body> </html>
<style>
/*基本结构性伪类选择器*/
:root{/*选取html根元素*/
background:#123;
}
div:target{
background:green;
}
li:empty{/*为空的*/
border:1px solid red;
}
li:not(.first){
color:pink;
}
#one::first-line{
font-size:30px;
}
#two::first-letter{
font-size:30px;
}
</style>
显示的效果如下图所示：
说明：div#two之所以显示背景为绿色，是因为我点击了tow这个超链接，就相当于two这个锚点连接被激活了，而它的锚点目标自然被div:target所作用。
820
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
