CSS中选择器介绍

最新推荐文章于 2024-03-09 13:40:17 发布

领导同意

最新推荐文章于 2024-03-09 13:40:17 发布

阅读量159

点赞数

分类专栏：前端笔记文章标签： CSS

本文链接：https://blog.csdn.net/qq_39686864/article/details/98042257

版权

笔记同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

前端

5 篇文章 0 订阅

订阅专栏

一、*号选择器，作用于所有标签，用的比较少
二、标签选择器，通过标签名，进行区分,一般和层级选择器联合使用
三、id选择器，不允许重复使用，原则上只允许用在一个标签，用的比较少
四、类选择器，一个类可用于多个元素，一个元素上也可以用多个类，可复用，最常用
五、层级选择器，主要应用在选择父类下的子元素，或者子元素下面的子元素，可与标签选择器结合使用,层级嵌套不超过4层；
六、组选择器，多个选择器。如果有同样的设置，把相同设置组合在一起
七、伪类选择器，常用hover，表示鼠标悬浮在元素上时的状态，常用在链接上面；
八、伪元素选择器，有before 和after ，他们可以通过样式在元素中插入自定义内容。

<!DOCTYPE html>
<html>
<head>
	<title>选择器类型</title>
	<style type="text/css">
		/*标签选择器*/
		span{
			font-size: 26px;
			color: red;
		}
		/*id选择器*/
		#div1{
			font-size: 20px;
			color: pink;
			font-family: '微软雅黑';
			font-style:italic;
			line-height: 40px
		}

		/*类选择器*/
		.big{
			font-size: 40px;
		}
		.green{
			color: green;
		}

		/*层级选择器*/
		.box {
			font-size: 20px;
			line-height: 50px
		}

		.box span{
			font-size: 35px;
			color: red;
		}
		.box .span02{
			font-size: 25px;
			color: blue;			
		}

		/*组选择器*/
		.box1,.box2,.box3{
			color: gold;
		}
		.box1{
			font-size: 30px;	
		}
		.box2{
			font-size: 20px;
		}
		.box3{
			font-size: 10px;
		}

		/*伪类选择器*/
		.link:hover{
			font-size: 30px;
			text-underline-position: none;
		}

		/*伪元素选择器*/
		.box4,.box5{
			font-size: 25;
		}
		.box4:before{
			content: "添加的内容--";
			color:red;
		}
	</style>	
</head>



<body>
	<h2>样式演示</h2>

	<!--id择器-->
	<div id=div1>
		<span>Mysql</span>主从简单讲就是A与B两台机器做主从后，在A上写数据，另外一台B也会跟着写数据，实现数据实时同步；主要作用有：①实时灾备，用于故障切换，②读写分离，提供查询服务，③备份，避免影响业务。
	</div>

	<!--类选择器-->
	<div>
		<span class="big green">Mysql</span>主从简单讲就是A与B两台机器做主从后，在A上写数据，另外一台B也会跟着写数据，实现数据实时同步；主要作用有：①实时灾备，用于故障切换，②读写分离，提供查询服务，③备份，避免影响业务。
	</div>

	<!--层级选择器-->
	<div class="box">
		<span>Mysql</span>主从简单讲就是A与B两台机器做<span class="span02">主从</span>后，在A上写数据，另外一台B也会跟着写数据，实现数据实时同步；主要作用有：①实时灾备，用于故障切换，②读写分离，提供查询服务，③备份，避免影响业务。
	</div>

	<!--组选择器-->
	<div class="box1">
		Mysql主从简单讲就是A与B两台机器做主从后，在A上写数据，另外一台B也会跟着写数据，实现数据实时同步；主要作用有：①实时灾备，用于故障切换，②读写分离，提供查询服务，③备份，避免影响业务。
	</div>
	<div class="box2">
		Mysql主从简单讲就是A与B两台机器做主从后，在A上写数据，另外一台B也会跟着写数据，实现数据实时同步；主要作用有：①实时灾备，用于故障切换，②读写分离，提供查询服务，③备份，避免影响业务。
	</div>
	<div class="box3">
		Mysql主从简单讲就是A与B两台机器做主从后，在A上写数据，另外一台B也会跟着写数据，实现数据实时同步；主要作用有：①实时灾备，用于故障切换，②读写分离，提供查询服务，③备份，避免影响业务。
	</div>

	<!-- 伪类选择器 -->
	<a href="https://blog.csdn.net/qq_39686864" class="link">作者博客</a>
	

	<!-- 伪元素选择器 -->
	<div class="box4">
		伪元素测试
	</div>
	<div class="box5">
		伪元素测试
	</div>
</body>
</html>

领导同意

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS中选择器介绍

一、* 选择器，作用于所有标签，用的比较少二、标签选择器，通过标签名，进行区分,一般和层级选择器联合使用三、id选择器，不允许重复使用，原则上只允许用在一个标签，用的比较少四、类选择器，一个类可用于多个元素，一个元素上也可以用多个类，可复用，最常用五、层级选择器，主要应用在选择父类下的子元素，或者子元素下面的子元素，可与标签选择器结合使用,层级嵌套不超过4层；六、组选择...
复制链接

扫一扫

专栏目录