上下文选择的器的四种使用场景

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网
程序实现
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>上下文选择器</title>
  8.   </head>
  9.   <style>
  10.     .clas.two > * {
  11.       color: blue;
  12.     }
  13.     .clas.three * {
  14.       color: lightblue;
  15.     }
  16.     .clas.four + * {
  17.       color: red;
  18.       /* border: 1px solid black; */
  19.     }
  20.     .grade.four > .clas.one ~ * {
  21.       color: green;
  22.     }
  23.   </style>
  24.   <body>
  25.     <!-- ul.grade$*4>li.clas{class$}*6 -->
  26.     <ul class="grade one">
  27.       <li class="clas">class1</li>
  28.       <li class="clas two">
  29.         父子位置<!-- ul>li.group{group}*3 -->
  30.         <ul>
  31.           <li class="group">group</li>
  32.           <li class="group">group</li>
  33.           <li class="group">group</li>
  34.         </ul>
  35.       </li>
  36.       <li class="clas">class3</li>
  37.       <li class="clas">class4</li>
  38.       <li class="clas">class5</li>
  39.       <li class="clas">class6</li>
  40.     </ul>
  41.     <hr />
  42.     <ul class="grade two">
  43.       <li class="clas">class1</li>
  44.       <li class="clas">class2</li>
  45.       <li class="clas three">
  46.         后代位置
  47.         <ul>
  48.           <li class="group">
  49.             group1
  50.             <ul class="side">
  51.               <li>张三</li>
  52.               <li>李四</li>
  53.               <li>王二</li>
  54.             </ul>
  55.           </li>
  56.           <li class="group">
  57.             group2
  58.             <ul class="side">
  59.               <li>Mike</li>
  60.               <li>David</li>
  61.             </ul>
  62.           </li>
  63.           <li class="group">group3</li>
  64.         </ul>
  65.       </li>
  66.       <li class="clas">class4</li>
  67.       <li class="clas">class5</li>
  68.       <li class="clas">class6</li>
  69.     </ul>
  70.     <hr />
  71.     <ul class="grade three">
  72.       <li class="clas">class1</li>
  73.       <li class="clas">class2</li>
  74.       <li class="clas">class3</li>
  75.       <li class="clas four">兄弟位置</li>
  76.       <li class="clas">class5</li>
  77.       <li class="clas">class6</li>
  78.     </ul>
  79.     <hr />
  80.     <ul class="grade four">
  81.       <li class="clas one">同级位置</li>
  82.       <li class="clas">class2</li>
  83.       <li class="clas">class3</li>
  84.       <li class="clas">class4</li>
  85.       <li class="clas">
  86.         class5
  87.         <ul>
  88.           <li class="group">group</li>
  89.           <li class="group">group</li>
  90.           <li class="group">group</li>
  91.         </ul>
  92.       </li>
  93.       <li class="clas">class6</li>
  94.     </ul>
  95.   </body>
  96. </html>
效果

四种上下文选择器

重点
  • 选择器的选择对象是它入口对象后的内容，譬如父子关系的，入口是父元素，受影响的是子元素，后代的入口是当前元素，受影响的是它的子元素，孙元素等子集，兄弟关系的入口是当前元素(兄)，受影响的是它之后的一个同级元素(弟)，同级关系，入口是当前元素，受影响的是它之后的所有同级元素问题点
    • 同级选择器似乎不仅仅影响同级，还会覆盖后代
【文章转自台湾大带宽服务器 http://www.558idc.com/tw.html提供，感恩】
更多阅读