1. 程式人生 > 其它 >2022.4.6 層次選擇器

2022.4.6 層次選擇器

層次選擇器

 

1、後代選擇器

在某個元素的後面 祖爺爺 爺爺 爸爸 你

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>index</title>
 
     <style>
         /*後代選擇器:body後代的p標籤樣式*/
         body p{
             background: red;
        }
     </style>
 
 </head>
 <body>
 
   <p>p1</p>
   <p>p2</p>
   <p>p3</p>
 <!-- 無序列表-->
   <ul>
     <li>
         <p>p4</p>
     </li>
     <li>
         <p>p5</p>
     </li>
     <li>
         <p>p6</p>
     </li>
   </ul>
 
 </body>
 </html>

 

2、子選擇器

下一代的標籤

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>index</title>
 
     <style>
      /*子選擇器:body下一代的p標籤樣式*/
         body>p{
             background: green;
        }
 
     </style>
 
 </head>
 <body>
 
   <p>p1</p>
   <p>p2</p>
   <p>p3</p>
 <!-- 無序列表-->
   <ul>
     <li>
         <p>p4</p>
     </li>
     <li>
         <p>p5</p>
     </li>
     <li>
         <p>p6</p>
     </li>
   </ul>
 
 </body>
 </html>

 

3、相鄰兄弟選擇器

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>index</title>
     <style>
         /*相鄰兄弟選擇器 名為name3的p標籤下面的一個p標籤修改樣式*/
         .name3 + p{
             background: yellow;
        }
 
     </style>
 
 </head>
 <body>
 
   <p>p1</p>
   <p class="name3">p2</p>
   <p>p3</p>
 <!-- 無序列表-->
   <ul>
     <li>
         <p>p4</p>
     </li>
     <li>
         <p>p5</p>
     </li>
     <li>
         <p>p6</p>
     </li>
   </ul>
 
 </body>
 </html>

 

4、通用兄弟選擇器

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>index</title>
 
     <style>
         /*通用兄弟選擇器 同級別都變:名為name3的p標籤下面的所有同級p標籤修改樣式 */
         .name3~p{
             background: blue;
        }
 
 
     </style>
 
 </head>
 <body>
 
   <p>p1</p>
   <p class="name3">p2</p>
   <p>p3</p>
   <p>p4</p>
 <!-- 無序列表-->
   <ul>
     <li>
         <p>p4</p>
     </li>
     <li>
         <p>p5</p>
     </li>
     <li>
         <p>p6</p>
     </li>
   </ul>
 
 </body>
 </html>