css伪类与伪元素

最新推荐文章于 2024-05-28 07:58:52 发布

丶拾慌

最新推荐文章于 2024-05-28 07:58:52 发布

阅读量2.3k

点赞数 1

分类专栏： CSS 文章标签： css html 伪类伪元素区别

本文链接：https://blog.csdn.net/zhu_xiao_yuan/article/details/51055424

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在css1中就引入了伪类和伪元素的概念，伪类可以对一个元素的不同状态或者类型进行区分，添加特殊效果。伪元素能为元素的组成部分，或是文本结点内容添加特殊效果。

伪类

我的导师曾说"认识事物可以采用分类法，简单化事物采用分步法"。我们都知道伪类在css1中就存在了，是在HTML元素处于某种状态时，为该元素添加css样式。之后，css2,css3又添加和完善了好些伪类。

结构化伪类

结构化伪类常被用于选择那些简单选择器无法访问的元素，这种元素在结构上存在某种关系(如某个元素的第一个或最后一个或者倍数个)，为选中的元素添加css样式。

选择符	描述
E：first-child	匹配父元素的第一个子元素E。
E：last-child	匹配父元素的最后一个子元素E。
E：only-child	匹配父元素仅有的一个子元素E。
E：only-of-type	匹配同类型中的唯一的一个同级兄弟元素E。
E：first-of-type	匹配同类型中的第一个同级兄弟元素E。
E：last-of-type	匹配同类型中的最后一个同级兄弟元素E。
E：nth-child(n)	匹配父元素的第n个子元素E。
E：nth-last-child(n)	匹配父元素的倒数第n个子元素E。
E：nth-last-type(n)	匹配同类型中的第n个同级兄弟元素E。
E：nth-last-of-type(n)	匹配同类型中的倒数第n个同级兄弟元素E。

UI元素状态伪类

UI元素状态伪类用于根据UI元素的状态对他们进行选择。

选择符	描述
E：link	设置超链接a在未被访问前的样式。
E：visited	设置超链接a在其链接地址已被访问过时的样式。
E：hover	设置元素在其鼠标悬停时的样式。
E：active	设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式。
E：checked	匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)
E：enabled	匹配用户界面上处于可用状态的元素E。
E：disabled	匹配用户界面上处于禁用状态的元素E。

其他伪类

选择符	描述
E：target	匹配相关URL指向的E元素。
E：empty	匹配没有任何子元素（包括text节点）的元素E。
E：root	匹配E元素在文档的根元素。
E：not(s)	匹配不含有s选择符的元素E。

伪元素

与伪类一样，伪元素提供的也是文档树中没有具体指明的信息，但不同的是伪类是作用在元素上，而伪元素作用的更深一层：在元素中的特定内容上。CSS3将伪元素前面的单个修改为双冒号用以区别伪类，但以前的写法仍然有效。

选择符	描述
E::first-letter	设置对象内的第一个字符的样式。
E::first-line	设置对象内的第一行的样式。
E::before	设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用
E::after	设置在对象后（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用

区别

简单的在这里举个伪类和伪元素区别的例子

伪类

<style type="text/css">
	div > p:nth-child(2){
		font-size: 20px;
		color: red;
		font-weight: bold;
	}
</style>
<body>
	<div>
		<p>这是第一个P标签</p>
		<p>这是第二个P标签</p>
		<p>这是第三个P标签</p>
		<p>这是第四个P标签</p>
	</div>
	
</body>

效果图：

如果我们不使用伪类呢？想要给第二个P标签添加样式，就可以给第二个P标签添加一个class样式。例如：

<style type="text/css">
	.second{
		font-size: 20px;
		color: red;
		font-weight: bold;
	}
</style>
<body>
	<div>
		<p>这是第一个P标签</p>
		<p class="second">这是第二个P标签</p>
		<p>这是第三个P标签</p>
		<p>这是第四个P标签</p>
	</div>	
</body>

伪元素

<style type="text/css">
	.second{
		width: 180px;
	}
	.second::first-line{
		font-size: 20px;
		color: red;
		font-weight: bold;
	}
</style>
<body>
	<div>
		<p>这是第一个P标签</p>
		<p class="second">
			这是第二个P标签
			这是第二个P标签
			这是第二个P标签
			这是第二个P标签
		</p>
		<p>这是第三个P标签</p>
		<p>这是第四个P标签</p>
	</div>	
</body>

效果图：

我们可以看到第二个P标签的第一行文本内容改变了样式，如果不使用伪元素的话，可以将第一行文本嵌套在一个span标签内，设置span的样式达到效果。

<style type="text/css">
	.second{
		width: 180px;
	}
	.span{
		font-size: 20px;
		color: red;
		font-weight: bold;
	}
</style>
<body>
	<div>
		<p>这是第一个P标签</p>
		<p class="second">
			<span class="span">这是第二个P标签</span>
			这是第二个P标签
			这是第二个P标签
			这是第二个P标签
		</p>
		<p>这是第三个P标签</p>
		<p>这是第四个P标签</p>
	</div>	
</body>

综上所述我们可以看出：伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要添加一个实际的元素标签才能达到，这也是他们一称为伪类，一个称为伪元素的原因。

参考：详解 CSS 属性 - 伪类和伪元素的区别

丶拾慌

关注

1
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
css伪类与伪元素

在css1中就引入了伪类和伪元素的概念，伪类可以对一个元素的不同状态或者类型进行区分，添加特殊效果。伪元素能为元素的组成部分，或是文本结点内容添加特殊效果。伪类我的导师曾说"认识事物可以采用分类法，简单化事物采用分步法"。我们都知道伪类在css1中就存在了，是在HTML元素处于某种状态时，为该元素添加css样式。之后，css2,css3又添加和完善了好些伪类。结构化伪类结构化伪类常
复制链接

扫一扫