常用的选择器

2021-06-08 07:32:35 阅读：113 来源： 互联网

<!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>

标签：常用,color,元素,id,锄禾日当午,选择器,red
来源： https://www.cnblogs.com/juham/p/14861221.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

常用的选择器