伪类与伪元素举例

伪类与伪元素，并且指出了伪类与伪元素选择器的区别是::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所作用。

伪类与伪元素举例

相关推荐