选择器的结构关系

最新推荐文章于 2022-05-06 15:20:16 发布

心奔

最新推荐文章于 2022-05-06 15:20:16 发布

阅读量469

点赞数

分类专栏： CSS 文章标签： 04-选择器的结构关系

本文链接：https://blog.csdn.net/g960526/article/details/88945223

版权

CSS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

选择器的结构关系

我们已经学了选择器的类型（标签名选择器、类名选择器、id选择器、通配符选择器），那么我们本节来学习一下选择器之间的结构关系有哪些。
选择器的结构关系作用：
根据标签结构（特征）来筛选需要选中的标签
选择器的结构关系有哪些：
后代选择器（包含选择器）：中间是空格，可以跳着写，但是不能少写
子级选择器：加了一个>号，只会从子级元素中找，不会在所有的后代中找，只能一个一个找，不能跳着找
群组选择器：中间用逗号隔开，将多个不同的选择器分到一组，添加共同的样式
复合选择器：中间没有空格，需要标签同时满足两个选择器选择的条件才能选择
毗邻选择器：中间用加号连接，选择某个元素时紧挨着下一个兄弟元素

源代码如下：

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>选择器的结构关系</title>
		<meta name="descrption" content="">
		<meta name="keywords" content="">
		<style type="text/css">
			/* 
			选择器的结构关系 
				作用：根据标签结构（特征）来筛选需要选中的标签
				后代选择器（包含选择器）div  p span：
					中间是空格，可以跳着写，但是不能少写
				子级选择器 div > ul > li：
					加了一个>号，只会从子级元素中去找，不会在所有的后代中找，只能一个一个找，不能跳着找
				群组选择器.box p,.list li（多个同级标签写一种属性值）：
					中间用逗号隔开，所写的值也是一样的
				复合选择器div.one（多个同级标签选择其中一个写属性值）：
					中间没有空格，
				毗邻选择器.first + .next：
					紧挨着.first的下一个的.next元素
			*/
			

			p{
				width:100px;
				height:100px;
				background-color:skyblue;
			}
			/*只想找到div里面的p标签*/
			/*后代选择器  div p 只要是后代都能找到 (中间可以跨越其他标签)
			后代选择器中首先看第一个是否是有，然后一次层层找，可以跳着找，但是不能少*/
			div  p span { /* 后代选择器，中间是空格，可以跳着写，但是不能少写 */
				
				width:100px;
				height:100px;
				background-color:red;
			}

			 /* 子级选择器   div > ul > li */
			div > ul > li{
				width:100px;
				height:100px;
				background-color:yellow;
			}
			/* 群组选择器 .box p和.list li的要求一样 .box p,.list li */
			.box p,.list li{
				width:100px;
				height:100px;
				background-color:pink;
			}
			/* .list li{
				width:100px;
				height:100px;
				background-color:pink;
			}
			 */


			/* 复合选择器： */
			div.one{
				width:100px;
				height:100px;
				background-color:red;
			}

			/* 毗邻选择器 */
			.first + .next{ /*  紧挨着的下一个兄弟元素 */
				width:100px;
				height:100px;
				background-color:pink;
			}
		</style>

	</head>

	<body>
		<!-- 后代选择器 div  p span -->
		<div>
			<ul>
				<li>
					<p>p1
						<span>span1</span>
					</p>
				</li>
			</ul>
		</div>
		<p>p2</p>
		<div>
			<ol>
				<li>
						<span>span2</span>   
				</li>
			</ol>
		</div>

		<!-- 子级选择器   div > ul > li-->
		<div>  
			<ul>
				<li>
						<span>span3</span>   
				</li>
			</ul>
		</div>

		<!-- 群组选择器 .box p,.list li-->
		<div class="box">
			<p>p1</p>
			<p>p2</p>
			<p>p3</p>
		</div>
		<ul class="list">
			<li>l1</li>
			<li>l2</li>
			<li>l3</li>
		</ul>
		
		<!-- 复合选择器：div.one中间没有空格 -->
		<div class="one">
			div1
		</div>
		<div >
			div2
		</div>
		<p class="one">pp</p>

	
		<!-- 毗邻选择器 -->
		<div class="first">div1</div>
		<div class="next">div2</div>
		<div class="next">div3</div>

	</body>
</html>

<!-- 
	后代选择器和复合条件选择器的区别 
		后代选择器用空格隔开
		复合条件选择器不用空格隔开(标签名必须写在最前面)
		有空格表示包含，没有空格表示并列
-->

效果图如下：
在这里插入图片描述
选择器的结构关系就是如上所写的几种，在以后的操作中会经常的使用得到。