欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

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

程序员文章站 2022-04-28 07:57:37
...



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>





相关标签： css html 标签 CSS中的选择器

上一篇： 本地对象Array的原型扩展实现代码_javascript技巧

下一篇： [i.MX6] 下载编译NXP的linux源代码

推荐阅读