html_元素、id、类、分组、通配、分组选择器

最新推荐文章于 2024-10-06 15:03:22 发布

destiny_JL

最新推荐文章于 2024-10-06 15:03:22 发布

阅读量342

点赞数

分类专栏： html 文章标签： css html

本文链接：https://blog.youkuaiyun.com/qq_40566831/article/details/112554825

版权

html 专栏收录该内容

14 篇文章

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>常用选择器</title>
		<style type="text/css">
			
			/*为页面中的所有的p元素，设置一个字体颜色为红色*/
			/*
			 * 元素选择器
			 * 	作用：通过元素选择器可以选则页面中的所有指定元素
			 *  语法：标签名 {}
			 */
			
			/*p{
				color: red;
			}
			
			h1{
				color: red;
			}*/
			
			/*
			 * id选择器
			 * 	- 通过元素的id属性值选中唯一的一个元素
			 *  - 语法：
			 * 		#id属性值 {}
			 */
			/*#p1{
				font-size: 20px;
			}*/
			
			/*
			 * 类选择器
			 * 	- 通过元素的class属性值选中一组元素
			 *  - 语法：
			 * 		.class属性值{}
			 */
			/*.p2{
				color: red;
			}
			
			.hello{
				font-size: 50px;
			}*/
			
			/*
			 * 为id为p1的元素，class为p2的元素，还有h1,同时设置一个背景颜色为黄色
			 */
			
			/*
			 * 选择器分组(并集选择器)
			 * 	- 通过选择器分组可以同时选中多个选择器对应的元素
			 * 	- 语法：选择器1,选择器2,选择器N{}
			 */
			/*#p1 , .p2 , h1{
				background-color: yellow;
			}*/
			
			/*
			 * 通配选择器
			 * 	- 他可以用来选中页面中的所有的元素
			 * 	语法：*{}
			 */
			
			/**{
				color: red;
			}*/
			
			/*
			 * 为拥有class p3 span元素设置一个背景颜色为黄色
			 * 
			 * 复合选择器（交集选择器）
			 * 	- 作用：
			 * 		- 可以选中同时满足多个选择器的元素
			 *  - 语法：
			 * 		- 选择器1选择器2选择器N{}
			 */
			span.p3{
				background-color: yellow;
			}
			
			/*
			 * 对于id选择器来说，不建议使用复合选择器
			 * p#p1{
				background-color: red;
			}*/
			
			
		
			
		</style>
	</head>
	<body>
		<h1>悯农</h1>
		<p>锄禾日当午</p>
		<p>锄禾日当午</p>
		<p id="p1">锄禾日当午</p>
		
		<!-- 
			我们可以为元素设置class属性，
				class属性和id属性类似，只不过class属性可以重复
				拥有相同class属性值的元素，我们说他们是一组元素
				可以同时为一个元素设置多个class属性值，多个值之间使用空格隔开
		-->
		<p class="p2 hello">锄禾日当午</p>
		<p class="p2">锄禾日当午</p>
		<p class="p2">锄禾日当午</p>
		
		<p>锄禾日当午</p>
		<p>锄禾日当午</p>
		<p>锄禾日当午</p>
		
		<p class="p3">锄禾日当午</p>
		<span class="p3">汗滴禾下土</span>
		
	</body>
</html>