常用选择器

最新推荐文章于 2024-05-04 13:53:08 发布

数数huhu

最新推荐文章于 2024-05-04 13:53:08 发布

阅读量65

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/qq_51942661/article/details/117463760

版权

此处保存的是我学习前端的笔记和一些日常练习，放在这里方便查看。成长之路难免会有错误，这时候才形象生动的体现那句经典名言：“失败是成功之母！” 哈哈哈哈...... 话不多说。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>常用选择器</title>
		<style>
			/*元素选择器：
			作用：通过元素选择器可以选择页面中的所有指定元素
			 语法：标签名{} */
			 /* 为页面中的所有p元素设置字体颜色为蓝色 */
			p{
				color: blue;
			}
			h1{
				color: coral;
			}
			/* id选择器
			 通过元素的id属性值选中唯一的一个元素
			 语法：#id属性值{}    */
			#p1{
				font-size: 30px;
				color:yellowgreen;
			}
			/*  类选择器
			通过元素的class属性值选中一组元素
			class属性和id属性类似，不过class属性可以重复
			语法：  .class属性值{}
			拥有相同class属性的元素，可以说他们是一组元素
			可以同时为一个元素设置多个class属性值，多个值间用空格隔开
			*/
			.p2{
				color:green;
			}
			.p3{
				font-size: 50px;
			}
			/* 选择器分组(并集选择器
			通过选择器分组时选中多个选择器对应的元素
			语法：选择器1，选择器2，选择器N{}
			) */
			#p1,.p2,h1{
				background-color: aquamarine;
			} 
			/* 通配选择器
			 它可以用来选中页面中的所有元素
			 语法： *{}
			 */
			*{
				color: red;
			}
			/* 复合选择器（交集选择器）
				作用：可以选中同时满足多个选择器的元素（一般多用在class）
				语法：选择器1选择器2选择器N{}
				
				*/
			span.p4{
				background-color: cyan;
			}
			
			
		</style>
	</head>
	<body>
		<h1>这里选中了一个一级标题</h1>
		<p>常用选择器的使用</p>
		<p id="p1">常用选择器的使用</p>
		<p class="p2 p4">常用选择器的使用</p>
		<p class="p2 p3">常用选择器的使用www</p>
		<p class="p2">常用选择器的使用</p>
		<p>常用选择器的使用</p>
		<p>常用选择器的使用</p>
		<p>常用选择器的使用</p>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>选择器</title>
		<style type="text/css">
			/* 为div中的span设置一个颜色为绿色 （后代元素选择器）*/
			#d1 span{
				color: greenyellow;
			}
			/* 选中id为d1的div中的p元素中的span元素 */
			#d1 p span{
				color: blueviolet;
			}
			
			
		</style>
	</head>
	<body>
		<div id="d1">
			<span>我是div标签中的span</span>
			<p><span>我是p标签中的span</span></p>
		</div>
		
		<div>
			<span>这是body中的span元素</span>
		</div>
		
	</body>
</html>

<!--
	元素间的关系：
		父元素：直接包含子元素的元素
		子元素：直接被父元素包含的元素
		祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素
		后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素
		兄弟元素：拥有相同父元素的元素叫做兄弟元素

	后代元素选择器：
	作用：选中指定元素的指定后代元素
	语法：  祖先元素 后代元素{}
-->