详述CSS样式常用选择器

最新推荐文章于 2024-02-02 09:19:55 发布

Zzze0101

最新推荐文章于 2024-02-02 09:19:55 发布

阅读量300

点赞数

分类专栏： css 文章标签： html 选择器

本文链接：https://blog.csdn.net/Zzze0101/article/details/90345272

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1、标签选择器

浏览器为HTML文档内标签名与标签选择器名相同的标签元素添加CSS样式，其语法如下：

标签选择器名{声明1;声明2;声明3;.....声明n;}

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			p{
				font-size: 20px;
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<p>字体大小20像素，有实线边框，边框为红色</p>
		<p>字体大小20像素，有实线边框，边框为红色</p>
	</body>
</html>

执行结果：
在这里插入图片描述
浏览器会为HTML文档内所有p标签元素添加“font-size: 20px;border: 1px solid red;”CSS样式。

2、id选择器

浏览器为id标签属性的属性值与id选择器名相同的标签元素添加CSS样式，其语法如下：

#id选择器名{声明1;声明2;声明3;.....声明n;}

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			#zzu{
				font-size: 20px;
				text-align: center;
				font-family: 方正准圆简体;
			}
		</style>
	</head>
	<body>
		<p id="zzu">字体大小20像素，文字位于段落中央，字体为方正准圆简体</p>
		<div id="zzu">字体大小20像素，文字位于段落中央，字体为方正准圆简体</div>
	</body>
</html>

执行结果：
在这里插入图片描述
浏览器为HTML文档内所有id属性值为zzu的标签元素添加“font-size: 20px;text-align: center;font-family: 方正准圆简体;”CSS样式。
注意：

id标签属性的属性值不能以数字开头。
id标签属性的属性值在HTML文档中必须唯一。

3、类选择器

浏览器为class标签属性的属性值与类选择器名相同的标签元素添加CSS样式，其语法如下：

.类选择器名{声明1;声明2;声明3;.....声明n;}

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
        	.a_1{
        		font-size: 20px;
        		border: 1px solid blue;
        	}
        	.a_2{
        		font-size: 20px;
        		font-family: "楷体";
        	}
		</style>
	</head>
	<body>
		<p class="a_1">字体大小20像素，有实线边框，边框为红色</p>
		<div class="a_2">字体大小20像素，无边框，字体为楷体</div>
	</body>
</html>

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

4、以上选择器的优先级

如果标签选择器，类选择器，id选择器同时作用，那么结果是什么？

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#zzs{/*id选择器*/
				color: red;
			}
			.a_3{/*类选择器*/
				color: blue;
			}
			p{
				color: black;
			}
		</style>
	</head>
	<body>
		<p class="a_3" id="zzs">一个段落</p>
		<p class="a_3">一个段落</p>	
	</body>
</html>

执行结果：

在这里插入图片描述
第一个段落为红色，第二个段落为蓝色，因此选择器优先级为：标签选择器<类选择器<id选择器

5、分组选择器

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

选择器1,选择器2...选择器n{声明1;声明2;声明3;.....声明n;}

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			p,span,#zc,.a{
				color: red;
			}
		</style>
	</head>
	<body>
		<p>这是一个块级元素</p>
		<span>这是一个行内元素</span>
		<i id="zc">这是一个行内元素</i>
		<div class="a">这是一个块级元素</div>
	</body>
</html>

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

6、后代选择器

后代选择器（descendant selector）又称为包含选择器，用于为特定的HTML子元素添加CSS样式，注意选择器之间用空格隔开，语法如下：

父代选择器1 子父代选择器2 子父代选择器3 ….子代选择器{声明1;声明2;声明3;.....声明n;}

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/*父代选择器 子父代选择器 子选择器*/
			body ol a{
				margin: 0;
				text-decoration: none;
			}
		</style>
	</head>
	<body>
		<ol>
			<a href="http://www.baidu.com">百度一下</a>
		</ol>
		<a href="http://www.baidu.com">百度一下</a>
	</body>
</html>

执行结果：
在这里插入图片描述
只去除了ol标签内的链接的下划线。

7、通配符选择器

通配符选择器匹配HTML文档中的任何HTML元素，其语法如下：

*{声明1;声明2;声明3;.....声明n;}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				color: red;
			}
		</style>
	</head>
	<body>
		<p>郑州大学</p>
		<div>郑州大学</div>
	</body>
</html>

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

Zzze0101

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
详述CSS样式常用选择器

目录1、标签选择器2、id选择器3、类选择器4、以上选择器的优先级5、分组选择器6、后代选择器7、通配符选择器1、标签选择器浏览器为HTML文档内标签名与标签选择器名相同的标签元素添加CSS样式，其语法如下：标签选择器名{声明1;声明2;声明3;.....声明n;}例如：<!DOCTYPE html><html> <head> <met...
复制链接

扫一扫