D 02_CSS中的选择器(常用的三种)

最新推荐文章于 2024-08-31 15:19:19 发布

原创最新推荐文章于 2024-08-31 15:19:19 发布 · 705 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #标签 #CSS中的选择器

本文详细介绍了CSS中的三种基本选择器：元素选择器、类选择器和ID选择器。通过实例展示了如何使用这些选择器来指定不同的样式效果，并强调了它们各自的适用场景。

CSS中的选择器

基本选择器

1,元素选择器

HTML标签又名HTML元素。

元素选择器：即以HTML标签名作为选择器名称。

作用：选择CSS样式代码作用于对应标签名的标签上。

l 格式：

标签名{

/*CSS样式代码*/

}

适用范围：适用于将相同样式作用在多个同名标签上

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
			<!--css最入门用style来设置,格式规范-->
		<style>
			span {
				/*元素选择器:(html元素标签来设置)
				 * span表示的选择器,大括号后面是样式声明
				 * css注释和java一样的
				 */
				font-size:70px;
				color: red;
				border: 1px solid royalblue ;
			}
		</style>
	</head>

	<body>

		<span>11111112222222</span>
		<span>22222222222222</span>
	</body>
</html>

2,类选择器

每个HTML标签都有一个class属性，class属性值即为类名

类选择器：即以HTML的类名（class属性值）作为选择器名称。

作用：选择CSS样式代码作用于对应类名的HTML标签上

l 格式：

.类名{

/*CSS样式代码*/

}

适用范围：适用于将样式一次作用在相同类名的标签上。（即使标签名不同）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/*
			 * 类选择器
			 * 用.加上类名
			 */
			.dred{
				color: red;
			}
			.sred{
				color: red;
			}
			
		</style>
	</head>
	<body>
		<span>span1我是黑色</span>
		<span class="sred">span2我是红色</span>
		<div >div1我是黑色</div>
			<div class="dred">div2我是红色</div>
	</body>
</html>

3,id选择器

每个HTML标签都有一个id属性，id的属性值必须在本页面是唯一的。

id选择器：即以HTML的id（id属性值）作为选择器名称。

作用：选择CSS样式代码作用于某个规定id值的html标签上

格式：

#id值{

/*CSS样式代码*/

}

适用范围：适用于将样式作用某个标签上。（更有针对性）

注意：

必须手动保证ID值在本页面唯一。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*
			 * id选择器,用#加上id来进行设置
			 * 
			 * 优先级
			 * ID选择器>类选择器>div选择器
			 */
			#d1 {
				color: red;
			}
			
			#d2 {
				background-color: aquamarine;
			}
			.s{
				color: green;
			}
		</style>

	</head>

	<body>
		<span class="s">span1我是黑色</span>
		<span>span2我是红色</span>
		<div id="d2">div1我是黑色</div>
		<div id="d1">div2我是红色</div>
	</body>

</html>