HTML之常用选择器

最新推荐文章于 2023-03-31 05:06:39 发布

中单亚索不给就送

最新推荐文章于 2023-03-31 05:06:39 发布

阅读量211

点赞数

文章标签： HTML 选择器

本文链接：https://blog.csdn.net/qq_44829555/article/details/90343940

版权

标签选择器

浏览器为HTML文档内标签名与标签选择器名相同的标签元素添加CSS样式；

语法格式：

标签选择器名 {
	declaration1;
	declaration2;
    …
}

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>百度一下，你就知道</title>
	</head>
	<body>
		<p >郑州大学</p>
		<style>
				p{
				text-align: center;
				font-family: '微软雅黑';
				border: 1px solid royalblue;
			}
		</style>
	</body>
</html>

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

id选择器

浏览器为id标签属性的属性值与id选择器名相同的标签元素添加CSS样式；

语法格式：

# id选择器名 {
	declaration1;
	declaration2;
    	…
}

示例：

		<p id="zzu">郑州大学</p>
		<style>
			#zzu {/*id选择器*/
				text-align: center;
				font-family: '微软雅黑';
				border: 1px solid royalblue;
			}
		</style>

执行结果与上述结果一致；

备注：
1、id标签属性的属性值不能以数字开头；
2、id标签属性的属性值在HTML文档中必须唯一；

类（class）选择器

浏览器为class标签属性的属性值与类选择器名相同的标签元素添加CSS样式；

语法格式：

类选择器名 {
	declaration1;
	declaration2;
    …
}

示例：

		<span class="zzu*1">郑州大学</span>
		<i class="zzu*1 zz">郑州大学</i>
		
		<style>
			.zzu*1{
				font-size: 12px;
				border: 1px solid red;
			}
			
			.zz{
				font-size: 36px;
			}
		</style>

执行结果
在这里插入图片描述
在控制台查看，第一个郑州大学的font-size是12px，第二个郑州大学是36px；

通配符选择器（*）

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

语法如下：

*{
	declaration1;
	declaration2;
    	…
}

示例（以类选择器中的html语句为基础）：

		<style>
			*{/*通配符选择器*/
				padding: 0;
				margin: 0 ;
			}
			
		</style>

此处是给html文件都加了padding和margin属性，展示效果不明显；关于padding和margin会在后续博客中具体说明；

分组选择器

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

语法格式：

选择器1,选择器2,选择器3…{
	declaration1;
	declaration2;
    …
}

例如在上一个类选择器的例子中，就可以把相同的属性写在分组选择器中；比如给两个标签都加一个边框

.zz,span{/*分组选择器*/
				border: 1px solid black;
			}

备注：分组选择器，是将选择器组合到一起；换句话说大部分选择器都可以塞到分组选择器中

后代选择器

又称为包含选择器，用于为特定的HTML子元素添加CSS样式；

语法结构：

父代选择器1 子父代选择器2 子父代选择器3 ….子代选择器 {
	declaration1;
	declaration2;
    	…
}

示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body id="aa">
		
		<a href="http://baidu.com">百度一下</a>
		
		<style>
			html #aa a{
				text-decoration: none;
			}		
		</style>
	</body>
</html>

执行结果
在这里插入图片描述
补充一点：
关于优先级的问题：
id选择器>class选择器>标签选择器
验证方式给出一段代码，读者自行验证

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--优先级问题：id>class>标签-->
	
	<span class="y" id="n">郑州大雪</span>
	<style>
		#n{
			color: red;
		}
		.y{
			color: royalblue;
		}
		/*span{
			color: coral;
		}*/
	</style>
	</body>
</html>