10-(CSS基础)伪类、伪元素选择器

最新推荐文章于 2024-07-25 08:14:42 发布

七色的天空

最新推荐文章于 2024-07-25 08:14:42 发布

阅读量67

点赞数

分类专栏： 03_CSS 文章标签： css html css3

本文链接：https://blog.csdn.net/q506174602/article/details/129950457

版权

03_CSS 专栏收录该内容

83 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>伪类 伪元素选择器</title>
	<style>
		a {
			text-decoration: none;
		}
		/*伪类选择器*/
		p:hover,a:hover {
			text-decoration: underline;
			font-size: 36px;
		}

		/*伪元素*/
		.box {
			background-color: pink;
			width: 300px;
			height: 300px;
			height: 600px;
		}
		.box:before {
			/*在box内部的最前面加一个 伪 元素
				要添加的伪元素，它不存在与dom文档中, 是一个心创建的虚拟元素，
				是一个元素的子元素，该子元素逻辑上存在，但不实际存在于文档中
			*/
			content: "迪丽热巴"
		}
		.box:after {
			/*content: url(../../01_HTML/images/古诗词.webp);*/
			content: "嘿嘿"
			/*background-size: 50px;*/
		}
		.box:after {
			/*content: url(../../01_HTML/images/古诗词.webp);*/
			/*content: "哈哈哈22333";*/
			content: "";
			background-image: url(../../01_HTML/images/古诗词.webp);
			background-size: cover;
			width: 200px;
			height: 200px;
			display: block;
			/*background-size: 50px;*/
		}
	</style>
</head>
<body>
	<!-- 
		1.伪类选择器
			常用于 a 标签的 hover 效果
	-->
	<a href="" >百度一下</a>
	<p>段落内容</p>

	<!-- 2.伪元素/伪对象选择器
		用于将特殊的效果添加到某些选择器中，其实是对那些不能通过类 id 选择器选择的元素的补充
	-->
	<div class="box">
		<span>伪元素示例伪元素示例伪元素示例伪元素示例伪元素示例伪元素示例</span>
		姓名<input type="text">
	</div>
	<!--  
	注意: 伪类和伪元素区别
		- 伪类只能用一个英文冒号 :
		- 伪元素/伪对象 既可以使用一个英文冒号, 也可以使用两个;
		伪元素在一个选择器中只能出现一次
		:after   ::atfer 等效
		:before  ::before 等效

		:before 和 :after 是CSS2的写法
		::before 和 ::after 是CSS3的写法(H5开发中，建议使用 ::)

		伪元素一定要结合 content 属性 一起使用

		伪元素不会出现在dom树中，【所以它不能通过js操作】，仅仅是在css渲染层加入
	-->
</body>
</html>

上述运行结果：