css如何分辨伪类和伪元素？伪类和伪元素的各自的区别与用法-创新互联

本篇文章给大家分享的是有关css如何分辨伪类和伪元素？伪类和伪元素的各自的区别与用法，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

十余年专注成都网站制作，成都定制网站，个人网站制作服务，为大家分享网站制作知识、方案，网站设计流程、步骤,成功服务上千家企业。为您提供网站建设,网站制作,网页设计及定制高端网站建设服务,专注于成都定制网站,高端网页制作,对自拌料搅拌车等多个方面，拥有多年建站经验。

一.伪类（用于向某些选择器添加特殊的效果）

伪类存在的意义是为了通过选择器找到那些不存在与DOM树中的信息以及不能被常规CSS选择器获取到的信息。伪类由一个冒号:开头，冒号后面是伪类的名称和包含在圆括号中的可选参数。任何常规选择器可以再任何位置使用伪类。伪类语法不区别大小写。一些伪类的作用会互斥，另外一些伪类可以同时被同一个元素使用。并且，为了满足用户在操作DOM时产生的DOM结构改变，伪类也可以是动态的。

伪类包含两种：状态伪类和结构性伪类。

状态伪类是基于元素当前状态进行选择的。在与用户的交互过程中元素的状态是动态变化的，因此该元素会根据其状态呈现不同的样式。当元素处于某状态时会呈现该样式，而进入另一状态后，该样式也会失去。常见的状态伪类主要包括：

:link 应用于未被访问过的链接；
:hover 应用于鼠标悬停到的元素；
:active 应用于被激活的元素；
:visited 应用于被访问过的链接，与:link互斥。
:focus 应用于拥有键盘输入焦点的元素。

结构性伪类是css3新增选择器，利用dom树进行元素过滤，通过文档结构的互相关系来匹配元素，能够减少class和id属性的定义，使文档结构更简洁。常见的包括：

:first-child 选择某个元素的第一个子元素；
:last-child 选择某个元素的最后一个子元素；
:nth-child() 选择某个元素的一个或多个特定的子元素；
:nth-last-child() 选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算；
:nth-of-type() 选择指定的元素；
:nth-last-of-type() 选择指定的元素，从元素的最后一个开始计算；
:first-of-type 选择一个上级元素下的第一个同类子元素；
:last-of-type 选择一个上级元素的最后一个同类子元素；
:only-child 选择的元素是它的父元素的唯一一个子元素；
:only-of-type 选择一个元素是它的上级元素的唯一一个相同类型的子元素；
:empty 选择的元素里面没有任何内容。

例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>伪类</title>
		<style>
			.demo {
				width: 200px;
				height: 500px;
				margin: 50px auto;
				text-align: center;
			}
			.tab_content {
			  	height: 50px;
			  	background: red;
			  	margin-bottom: 10px;
			}
			#tab1:target, #tab2:target, #tab3:target {
			    background:blue;
			    line-height: 50px;
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<ul class="tabs">
			    <li><a href="#tab1">标签一</a></li>
			    <li><a href="#tab2">标签二</a></li>
			    <li><a href="#tab3">标签三</a></li>
			</ul>
			<div id="tab1" class="tab_content">tab1</div>
			<div id="tab2" class="tab_content">tab2</div>
			<div id="tab3" class="tab_content">tab3</div>
		</div>
	</body>
</html>

效果图1：

css如何分辨伪类和伪元素？伪类和伪元素的各自的区别与用法

效果图2：

css如何分辨伪类和伪元素？伪类和伪元素的各自的区别与用法

上面效果图1与效果图2的区别在于当我单击标签一以后，tab1盒子的背景色由红色变为蓝色，字体颜色变为白；当点击标签二时，就会变成tab2发生变化，点击标签三也一样。

二：伪元素（用于将特殊的效果添加到某些选择器）

伪元素是对元素中的特定内容进行操作，而不是描述状态。它的操作层次比伪类更深一层，因此动态性比伪类低很多。实际上，伪元素就是选取某些元素前面或后面这种普通选择器无法完成的工作。控制的内容和元素是相同的，但它本身是基于元素的抽象，并不存在于文档结构中！

常见的伪元素选择器包括：
:first-letter 选择元素文本的第一个字（母）。
:first-line 选择元素文本的第一行。
:before 在元素内容的最前面添加新内容。
:after 在元素内容的最后面添加新内容。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.demo {
				width: 500px;
				height: 500px;
				margin: 50px auto;
				text-align: center;
			}
			.spliter::before, .spliter::after {
		      	content: '';
		      	display: inline-block;
		      	border-top: 1px solid black;
		      	width: 200px;
		      	margin: 5px;
		    }
		</style>
	</head>
	<body>
		<div class="demo">
			<p class="spliter">分割线</p>
		</div>
	</body>
</html>

效果图：

css如何分辨伪类和伪元素？伪类和伪元素的各自的区别与用法

以上就是css如何分辨伪类和伪元素？伪类和伪元素的各自的区别与用法，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联成都网站设计公司行业资讯频道。

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

网站栏目：css如何分辨伪类和伪元素？伪类和伪元素的各自的区别与用法-创新互联
URL链接：https://www.cdcxhl.com/article16/dgjsgg.html

成都网站建设公司_创新互联，为您提供标签优化、网站营销、手机网站建设、服务器托管、网站导航、面包屑导航

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容