高级选择器-CSDN博客

本文链接：https://blog.csdn.net/luan7liem/article/details/84863424

一.后代选择器

选择器+空格+选择器{属性：值;}

后代选择器首选要满足包含（嵌套）关系。

父集元素在前边，子集元素在后边。

特点：无限制隔代。

只要能代表标签，标签、类选择器、ID选择器自由组合。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>后代选择器</title>
	<style type="text/css">
	/*选择器+空格+选择器{属性：值}*/
      .box{
      	font-size:40px;
      	color:red;
      }
      div  span{
      	font-size:50px;

      }
      .box span{
          background-color:blue; 
      }

	.box .miss{
		color:red;
	}		
	</style>
</head>
<body>
	<div class="box">
		<p><span class="miss">web 前端</span></p>
	</div>
	<div class="box"><span>web 全栈</span></div>
	
</body>
</html>

二.子代选择器

选择器>选择器{属性:值;}

选中直接下一代元素。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>子代选择器</title>
	<style type="text/css">
	div>span{
		color: red;
		font-size: 40px;
	}	
    p>span{
       color:green;
       font-size:60px;
   
}
	</style>
	
</head>
<body>
	
	<div>
		<span>web 前端</span>
	    <p><span> web 全栈</span></p>
	</div>
		
</body>
</html>

三.并集选择器

选择器，选择器，选择器{属性:值;}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>并集选择器</title>
	<style type="text/css">
	.box,#miss,span,h1{
		font-size:100px;
		color: #fff;
		background-color: green;
}

</style>
	
</head>
<body>
	<div class="box">web全栈</div>
	<p id="miss">web 前端</p>
	<span>web 大前端</span>
	<h1>web h5</h1>
</body>
</html>

四.相邻兄弟选择器

选择器+选择器{属性:值;}

相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>相邻兄弟选择器</title>
	<style type="text/css">
      h1+p{
      	margin-top:50px;
      }
      /*请记住，用一个结合符只能选择两个相邻兄弟中的第二个元素。请看下面的选择器*/
      li + li {font-weight:bold;}
		
	</style>
</head>
<body>
	<h1>This is a heading.</h1>
    <p>This is paragraph.</p>
    <p>This is paragraph.</p>
    <p>This is paragraph.</p>
    <p>This is paragraph.</p>
    <p>This is paragraph.</p>
    
    <div>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
  <ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ol>
</div>
	
</body>
</html>

另外:基础选择器的优先级为: id选择器 > 类选择器 > 标签选择器 > 通配选择器*

作用范围越精确,优先级越高