CSS-高级选择器-层次选择器（后代选择器、子选择器、相邻兄弟选择器、相邻通用选择器） 

层次选择器
1、后代选择器:在某个元素的后面，比如：爷爷 爸爸 你，当你为爷爷这个元素设置样式时，那后面的两个元素，也是跟被设置，如body p{},那个这选择器代表着，body标签中，所有有的p标签生效
2、子选择器:一代，只是当前元素的下一代，如：爷爷 爸爸 你，生效的只会是，前面两个，body>p{} 表示body标签内的第一级标签为p标签，那就生效
3、相邻兄弟选择器：相邻、同辈，只有相邻下方的第一个标签生效 .class名称 + p{} 表示如果class名称下方的标签是p标签，那就生效，并且只有一个生效　　
4、相邻通用选择器：相邻下方对应全部标签生效 ，.class名称~p{} class下方所有的p标签生效






<!DOCTYPE html>


<html>
<head>
<meta charset="utf-8">
<title>层次选择器</title>


后代选择器

<style>


      body p{/*使用空格--body后面所有的p标签*/
    background:red;
    }    
  </style>
  
</head>
<body>
    <p>p1</p>
   <p>p2</p>
   <p>p3</p>
  <ul>
    <li>p4</li>
    <li>p5</li>
    <li>p6</li>
  </ul>
  
  
  
</body>
</html>






<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>层次选择器</title>
子选择器
  <style>
      body>p{/*使用>来表示*，相当于只会生效在body标签内的p元素，那body标签内，其他标签包含有p标签的话不会生效/
    background:red;
    }    
  </style>
  
</head>
<body>
    <p>p1</p>
   <p>p2</p>
   <p>p3</p>
  <ul>
    <li>p4</li>
    <li>p5</li>
    <li>p6</li>
  </ul>
  
  
  
</body>
</html>






<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>层次选择器</title>
  <style>
      /*相邻兄弟选择器：使用+号*/
    .active + p{/*表示，class名称相邻下方的的p标签会生效，并且只有一个标签会生效，这个属性*/
      background:red;
      
    }
    
    
  </style>
  
</head>
<body>
    <p>p1</p>
   <p class="active">p2</p>
   <p>p3</p>
  <ul>
    <li>p4</li>
    <li>p5</li>
    <li>p6</li>
  </ul>
  
  
  
</body>
</html>






<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>层次选择器</title>
  <style>
      /*通用兄弟选择器*/
    .active~p{/*与class名称相邻下方的p标签，都生效*/
      background:red;
      
    }
    
    
  </style>
  
</head>
<body>
    <p>p1</p>
   <p class="active">p2</p>
   <p>p3</p>
   <p>p3</p>
   <p>p3</p>
   <p>p3</p>
   <p>p3</p>
  <ul>
    <li>p4</li>
    <li>p5</li>
    <li>p6</li>
  </ul>
  
  
  
</body>
</html>




 







            

            
posted @ 
2022-06-17 15:34 
hollg 
阅读(1303) 
评论(0) 
 
收藏 
举报