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  阅读(1025)  评论(0编辑  收藏  举报