HTML中的css选择器

最新推荐文章于 2024-07-06 20:00:00 发布

qiangzhogshou

最新推荐文章于 2024-07-06 20:00:00 发布

阅读量569

点赞数 1

本文链接：https://blog.csdn.net/qiangzhogshou/article/details/101453684

版权

选择器

浏览器通过选择器为满足条件的HTML元素添加CSS样式，简言之，选择需要的标签，设置满足需求的样式属性。

标签选择器、类选择器、ID选择器

这三类选择器对应相应的标签、标签中的类属性、标签中的ID属性：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style>
			
			/**标签选择器：标签+{}；在此设置的标签属性，浏览器打开此页面时，选择所有此标签进行属性设置**/
			span{
				color: greenyellow;
			}
			
			/**类选择器：.+类名+{}；在此设置的类属性，浏览器打开此页面时，选择所有此类进行属性设置，优先级高于标签选择器**/
			.class_txt{
				color: red;
			}
			
			/**id选择器：#+id名+{}；在此设置的id属性，浏览器打开此页面时，选择此id进行属性设置，优先级高于类选择器和标签选择器**/
			#id_txt{
				color: blue;
			}
			
		</style>
		
	</head>
	<body>
		
		<!-- 浏览器选择span标签，进行属性设置，此处为绿色字体 -->
		<span>qiang</span>
		
		<!-- 浏览器选择class_txt类属性，进行属性设置，此处为红字体 -->
		<span class="class_txt">zhog</span>
		
			
		<!-- 浏览器选择id_txt的id属性（在同一个页面中，id属性应唯一，不能重复），进行属性设置，此处为蓝字体 -->
		<span class="class_txt" id="id_txt">shou</span>
		
		<span>666</span>
		
	</body>
</html>

效果：
在这里插入图片描述

分组选择器

如果HTML文档多个CSS样式表内的部分样式相同，则可以通过定义一个分组选择器以简化CSS样式代码，该选择器的选择器名由多个选择器组成，使用逗号分隔。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style>
			
			/**分组选择器：标签或属性1+，+标签或属性2+，+...+标签或属性3+{}**/
			span,a,.class_txt,#id_txt{
				color: greenyellow;
			}
			
			/**标签选择器**/
			h5{
				color: red;
			}
			
			/**标签选择器**/
			h6{
				color: blue;
			}
			
		</style>
		
	</head>
	<body>
		
		<!-- 浏览器选择满足分组选择器中的选择，进行属性设置，此处均为绿色字体 -->
		<span>国</span>
		<a>庆</a>
		<h5>节</h5>
		<h6>快</h6>
		
		
		<!--类属性优先级依旧高于标签 -->
		<h5 class="class_txt">乐</span>
		
			
		<!-- id属性优先级依旧高于标签和类属性 -->
		<h6 class="class_txt" id="id_txt">！</span>
		
	</body>
</html>

结果：
在这里插入图片描述

后代选择器

后代选择器（descendant selector）又称为包含选择器，用于为特定的HTML子元素添加CSS样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style type="text/css">
			
			/**后代选择器：父代选择器1 子父代选择器2 子父代选择器3 …子代选择器+{}；(选择器之间空格隔开) **/
			h2 span{
				color: greenyellow;
			}
			
			/**后代选择器：父代选择器1 子父代选择器2 子父代选择器3 …子代选择器+{}；(类选择器不需要空格) **/
			span .class_txt{
				color: red;
			}
			
			/**后代选择器：父代选择器1 子父代选择器2 子父代选择器3 …子代选择器+{}；(id选择器不需要空格) **/
			span #id_txt{
				color: blue;
			}
			
		</style>
		
	</head>
	<body>
		
		<h2>
				
			<!-- 浏览器选择满足后代选择器中的h2下span标签，进行属性设置，此处span为绿色字体 -->
			<span>国</span>
			
			<!-- 浏览器选择满足后代选择器中的span中class_txt类，进行属性设置，此处span为红色字体 -->
			<span class="class_txt">庆</span>
			
			<!-- 浏览器选择满足后代选择器中的span中的id_txt，进行属性设置，此处span为蓝色字体 -->
			<span class="class_txt" id="id_txt">节</span>
			
			<!-- 浏览器选择满足后代选择器中的span中class_txt类，进行属性设置，此处span为红色字体 -->
			<span class="class_txt">快</span>
			
			<span>乐</span>
		</h2>
		
		<!--  未设置，默认黑色 -->
		<h1>
			<span>！</span>
		</h1>
		
	</body>
</html>

效果：
在这里插入图片描述

通配符选择器

通配符选择器匹配HTML文档中的任何HTML元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style>
			
			*{
				margin: 0px;
				padding: 0px;
			 }/*进行通配符属性设置，在此我们使内容与页面边间距为0*/
			
		</style>
		
	</head>
	<body>
		
		<h4>国庆节快乐！</h4>
		
	</body>
</html>

设置前：
在这里插入图片描述
设置后：

伪类选择器

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/*设置初始a标签状态，见图1*/
			a{
				text-decoration: none;
				font-family: 华文彩云;
				font-size: 20px;
			}
			
			/*向未被访问的链接添加样式，见图1*/
			a:link{
				color: greenyellow;
			}
			
			/*向以被访问的链接添加样式，见图2*/
			a:visited{
				color: purple;
			}
			
			/*向链接添加鼠标浮于其上时的样式，见图3*/
			a:hover{
				text-decoration:underline;
				color: orangered;
			}
			
			/*向未正被激活链接添加样式，见图4*/
			a:active{
				font-size: 30px;
			}
		</style>
	</head>
	<body>

		<a href="https://blog.csdn.net/qiangzhogshou/article/list/2?">qiangzhogshou的博客</a>
	
	</body>
</html>

图1：

图2：

图3：

图4：

注意：若:link、:visited、:hover和:active一起使用，:hover 必须被置于 :link 和 :visited 之后，:active 必须被置于 :hover 之后，即:link -> :visited -> :hover -> :active
简记四种常用的伪类选择器：l（link）ov（:visited）e ---- h（hover）a（active）te