css选择器

最新推荐文章于 2023-12-12 09:35:39 发布

请叫我木丁西

最新推荐文章于 2023-12-12 09:35:39 发布

阅读量367

点赞数

分类专栏： html 史上最全的HTML基础教程文章标签： css选择器选择器样式选择器选择器优先级

本文链接：https://blog.csdn.net/qq1012421396/article/details/62453765

版权

html 同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

史上最全的HTML基础教程

18 篇文章 32 订阅

订阅专栏

css选择器：选择器的作用就是找到对应的数据进行样式化。

样式选择器优先级：

ID选择器的样式 > 类选择器 > 标签选择器。

常见选择器如下
1.标签选择器：就是找到所指定的标签进行样式化。
格式：
标签名{
样式1；
样式2：
。。。
}
例如：
div{
color:#0000FF;
font-size:30px;
}

2.类选择器：使用类选择器首先要给html标签指定对应的class属性值。
格式：
.class的属性值{
样式1；
样式2；
。。。
}
例如：
.class1{
background-color:#99CC99;
font-size:24px;
}

应用：<div class="class1">这个是个div标签</div>

类选择器注意事项：
1.html元素的class属性值一定更不能以数字开头。
2.类选择器的样式优先于标签选择器的样式

3.ID选择器：使用ID选择器首先要给html元素添加一个id属性值。
格式：
#id属性值{
样式1；
样式2；
。。。
}
例如：
#id1{
background-color:#FFFF00;
font-size:44px;
font-family:"微软雅黑";
}

应用：<div id="id1">这个是第1个<div>标签</div>

ID选择器的注意事项：
1.ID选择器的样式优先级最高，优先于类选择器与标签选择器。
2.id的属性值也是不能以数字开头的。
3.id 属性值只能在每个 HTML 页面中最多只能出现一次。

4.交集选择器：就是对选择器1中的选择器2进行样式化。
格式：
选择器1 选择器2{
样式1；
样式2；
。。。
}
例如：
div span{
background-color:#99CCFF;
font-size:88px;
}

应用：<div>这个是什么？<span>这是一个span行内标签</span></div>

5.并集选择器：对指定的选择器进行统一的样式化。
格式：
选择器1,选择器2{
样式1；
样式2；
。。。
}
例如：
span, a{
border-style:solid;
border-color:#000000;
}

6.通用选择器：
*{
样式1；
样式2；
。。。

}

  
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css选择器</title>
<style type="text/css">
/*
	选择器：选择器的作用就是找到对应的数据进行样式化。
	
	常见选择器如下
		1.标签选择器：就是找到所指定的标签进行样式化。
			格式：
				标签名{
					样式1；
					样式2：
					。。。
				}
			例如：
				div{
					color:#0000FF;
					font-size:30px;
				}
				
		2.类选择器：使用类选择器首先要给html标签指定对应的class属性值。
			格式：
				.class的属性值{
					样式1；
					样式2；
					。。。
				}
			例如：
				.class1{
					background-color:#99CC99;
					font-size:24px;
				}
				
				应用：<div class="class1">这个是个div标签</div>
				
		类选择器注意事项：
			1.html元素的class属性值一定更不能以数字开头。
			2.类选择器的样式 优先于 标签选择器的样式
		
		3.ID选择器：使用ID选择器首先要给html元素添加一个id属性值。
			格式：
				#id属性值{
					样式1；
					样式2；
					。。。
				}
			例如：
				#id1{
					background-color:#FFFF00;
					font-size:44px;
					font-family:"微软雅黑";
				}
				
				应用：<div id="id1">这个是第1个&lt;div&gt;标签</div>
		
		ID选择器的注意事项：
			1.ID选择器的样式优先级最高，优先于类选择器与标签选择器。
			2.id的属性值也是不能以数字开头的。
			3.id 属性值只能在每个 HTML 页面中最多只能出现一次。
		
		4.交集选择器：就是对选择器1中的选择器2进行样式化。
			格式：
				选择器1 选择器2{
					样式1；
					样式2；
					。。。
				}			
			例如：
				div span{
					background-color:#99CCFF;
					font-size:88px;
				}
				
				应用：<div>这个是什么？<span>这是一个span行内标签</span></div>
		
		5.并集选择器：对指定的选择器进行统一的样式化。
			格式：
				选择器1,选择器2{
					样式1；
					样式2；
					。。。
				}
			例如：
				span, a{
					border-style:solid;
					border-color:#000000;
				}
		
		6.通用选择器：
			*{
				样式1；
				样式2；
				。。。
			}
*/
	div{
		color:#0000FF;
		font-size:30px;
		background-color:#FF00FF;
	}
	
	.class1_{
	 	background-color:#99CC99;
		font-size:24px;
	}
	#id1{
		background-color:#FFFF00;
		font-size:44px;
		font-family:"微软雅黑";
	}
	
	div span{
		background-color:#99CCFF;
		font-size:88px;
	}
	
	span, a{
		border-style:solid;
		border-color:#000000;
	}
	
	*{
		text-decoration:line-through;/*一条线从标签中穿过*/
		background-color:#CCFFFF;
	}
</style>
</head>
<body>
	<div id="id1">这个是第1个&lt;div&gt;标签</div>
	<div class="class1_">这个是第2个&lt;div&gt;标签</div>
	<div>这个是第3个&lt;div&gt;标签</div>
	<a href="#">这是&lt;a&gt;标签</a><br/>
	<span>这是一个span行内标签</span>
	<div>这个是什么？<span>这是一个span行内标签</span></div>
</body>
</html>