元素选择器(一)

最新推荐文章于 2024-07-06 20:00:00 发布

@ ^ @

最新推荐文章于 2024-07-06 20:00:00 发布

阅读量326

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/jdbfvhxx/article/details/97615624

版权

CSS 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

元素选择器

作用:通过元素选择器可以选择页面中所有指定的元素
语法:标签名{ }

id选择器
通过id属性值选中唯一的元素
语法 : #id属性值{}
类选择器
通过元素的class属性值选取一组元素
语法:.class属性值{}
选择器分组(并集)
通过选择器分组可以同时选中多个选择器对应的元素
语法:选择器1,选择器2,选择器N{}
通配选择器
可以选中页面中所有元素
语法: * {}
复合选择器(交集选择器)
作用:
可以选择中同时满足多个选择器的元素
语法:
选择器1选择器2选择器N{}
class属性
class属性和id属性类似,只不过id属性可以重复
拥有相同class的元素是一组类元素
还可以通过空格设置多个类属性

<!DOCTYPE html> 
<html>
	<head>
		<meta charset="UTF-8">
		<title>常用选择器</title>
		<style type="text/css">
			/*为页面中所有的p元素设置一个字体为红色
			 * 
			 * 元素选择器
			 * 	作用:通过元素选择器可以选择页面中所有指定的元素
			 * 	语法:标签名{ }
			 */
			
			/*h1{
				color: blue;
			}
			p{
				color: red;
			}*/
			
			/*
			 * id选择器
			 * 	通过id属性值选中唯一的元素
			 * 	语法:
			 * 		#id属性值{}
			 */
			#p1{
				color: green;
				font-size: 20px;
			}
			
			/*
			 * 类选择器
			 * 	通过元素的class属性值选取一组元素
			 * 	语法:
			 * 		.class属性值{}
			 */
			
			.p2{
				color: blue;
				font-size: 20px;
			}
			
			.p{
				color: red;
			}
			
			/*
			 *为id为p1的元素,class为p2的元素及h1设置背景为黄色 
			 */
			
			/*
			 *选择器分组(并集)
			 * 	通过选择器分组可以同时选中多个选择器对应的元素
			 * 	语法:选择器1,选择器2,选择器N{} 
			 */
			
			#p1,.p2,h1{
				background-color: yellow;
			}
			
			/*
			 * 通配选择器
			 * 	可以选中页面中所有元素
			 * 	语法: * {}
			 */
			
			*{
				background-color: lawngreen;	
			}		
			
			/*
			 * 复合选择器(交集选择器)
			 * 	作用:
			 * 		 可以选择中同时满足多个选择器的元素
			 * 	语法:
			 * 		选择器1选择器2选择器N{}
			 */
			span.p3{
				background-color: blanchedalmond;
			}
			
			/*
			 * 对于id选择器来说,不建议使用复合选择器
			 * p#p1{
			 *	background-color: ;
			 *}
			 */
			
			
		</style>
	</head>
	<body>
		<h1>离思</h1>
		
		<p>曾经沧海难为水</p>
		<p id="p1">除却巫山不是云</p>
		
		<!--
        	可以为类元素设置class属性
        	class属性和id属性类似,只不过id属性可以重复
        	拥有相同class的元素是一组类元素
        	还可以通过空格设置多个类属性
        -->
		<p class="p2">曾经沧海难为水</p>
		<p class="p2">除却巫山不是云</p>
		
		<p class="p2 p">曾经沧海难为水</p>
		<p class="p2 p">除却巫山不是云</p>
	
		<p class="p3">曾经沧海难为水</p>
		<span class="p3">除却巫山不是云</span>
	</body>
</html>