网页CSS样式——详述常用选择器：id class 标签 * 分组后代

最新推荐文章于 2022-06-20 22:04:58 发布

CandidBoy

最新推荐文章于 2022-06-20 22:04:58 发布

阅读量276

点赞数

本文链接：https://blog.csdn.net/CandidBoy/article/details/90349871

版权

一、选择器

选择器：浏览器通过选择器为满足条件的HTML元素添加CSS样式

二、常用选择器

1、标签选择器

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

其语法如下：

标签选择器{deciaration1;deciaration2;......}
例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<p>郑州大学</p>
		<style>
			p {
				text-align:center;
				font-family:宋体，华文彩云，'maiandra';
				border:1px solid red;
			}	
		</style>
	</body>
</html>

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

2、类选择器

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

其语法如下：
在这里插入图片描述
示例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>类选择器</title>
		<style type="text/css">
			.border{
				border:1px solid red;
			}
			.center {
				text-align: center;
			}
		</style>
	</head>
	<body>
		<p class="border center">添加边框且居中显示</p>
	</body>
</html>

结果如下：
在这里插入图片描述
注意：
①、class标签属性的属性值不能以数字开头；
②、class标签属性的属性值可以有多个，每个值之间用空格间隔；

3、id选择器

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

其语法如下：
在这里插入图片描述
示例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>id选择器</title>
		<style type="text/css">
			#font_size {
				font-size: 24px;
			}
		</style>
	</head>
	<body>
		<p id="font_size">文字大小24像素</p>
	</body>
</html>

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

4、后代选择器

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

其语法如下：
在这里插入图片描述
注意：选择器之间用英文的点间隔

示例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>后代选择器</title>
		<style type="text/css">
			/*只为ol标签元素内class="font_color"的子元素添加CSS样式*/
			ol .font_color {
				color: red;
			}
		</style>
	</head>
	<body>
		<ol>
			<li>第一项</li>
			<li class="font_color">第二项</li>
		</ol>

		<ul>
			<li>第一项</li>
			<li class="font_color">第二项</li>
		</ul>
	</body>
</html>

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

5、分组选择器

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

其语法如下：
在这里插入图片描述
示例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>分组选择器</title>
		<style>
			/*#numbers{
				color: red;
			}
			.letters{
				color: red;
			}*/
			
			/*上面CSS用于数字或字母的颜色设置为红色，但代码冗余！*/
			#numbers,.letters{
				color: red;
			}
		</style>
	</head>
	<body>
		<p id="numbers">9527</p>
		<h3 class="letters">Traveler</h3>
	</body>
</html>

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

6、通配符选择器

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

其语法如下：
在这里插入图片描述
示例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>通配符选择器</title>
		<style>
			/*取消标签默认margin与padding值*/
			*{
				margin:0px;
				padding:0px;
			}
		</style>
	</head>
	<body>
		<p style="border:1px solid red;">海上生明月，天涯共此时。</p>
	</body>
</html>

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

二、选择器优先级

1、优先级介绍

id选择器优先级最高，标签选择器优先级最低，如下所示：id选择器 > 类选择器 > 标签选择器，如下代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>选择器优先级</title>
		<style type="text/css">
			span {
				font-size: 36px;
			}
			.span_class {
				font-size: 24px;
			}
			#span_id {
				font-size: 12px;
			}
		</style>
	</head>
	<body>
		<span>span</span>
		<span class="span_class">span</span>
		<span class="span_class" id="span_id">span</span>
	</body>
</html>

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

2、!important

!important用于提高指定样式规则的应用优先级，如下代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>!important</title>
		<style type="text/css">
			span {
				font-size: 36px !important;
			}
			.span_class {
				font-size: 24px;
			}
			#span_id {
				font-size: 12px;
			}
		</style>
	</head>
	<body>
		<span>span</span>
		<span class="span_class">span</span>
		<span class="span_class" id="span_id">span</span>
	</body>
</html>

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

CandidBoy

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
网页CSS样式——详述常用选择器：id class 标签 * 分组后代

一、选择器选择器：浏览器通过选择器为满足条件的HTML元素添加CSS样式二、常用选择器1、标签选择器浏览器为HTML文档内标签名与标签选择器名相同的标签元素添加CSS样式其语法如下：例子：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title&gt...
复制链接

扫一扫