Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 上下文选择的器的四种使用场景
Blogger Information
Blog 12
fans 0
comment 0
visits 3506
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
上下文选择的器的四种使用场景
len
Original
258 people have browsed it

程序实现

  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>

效果

四种上下文选择器

重点

  • 选择器的选择对象是它入口对象后的内容，譬如父子关系的，入口是父元素，受影响的是子元素，后代的入口是当前元素，受影响的是它的子元素，孙元素等子集，兄弟关系的入口是当前元素(兄)，受影响的是它之后的一个同级元素(弟)，同级关系，入口是当前元素，受影响的是它之后的所有同级元素

    问题点

    • 同级选择器似乎不仅仅影响同级，还会覆盖后代
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：总结的不错，继续加油
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post