Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 伪类选择器与选择器权重的实例及盒子计算大小box-sizing属性的功能演示
Blogger Information
Blog 12
fans 0
comment 0
visits 3529
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
伪类选择器与选择器权重的实例及盒子计算大小box-sizing属性的功能演示
len
Original
235 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.     p {
  11.       color: lightseagreen;
  12.       font-weight: bold;
  13.     }
  14.     .grade.one,
  15.     .grade.two {
  16.       width: 400px;
  17.       height: 300px;
  18.       border: 3px solid red;
  19.       display: inline-block;
  20.       padding: 25px 35px;
  21.     }
  22.     .grade.one {
  23.       box-sizing: border-box;
  24.     }
  25.     .grade.two {
  26.       box-sizing: content-box;
  27.     }
  28.     .grade.one > :last-child > * {
  29.       color: red;
  30.     }
  31.     ul.grade.three > :nth-child(3) * {
  32.       color: green;
  33.     }
  34.     body ul.grade.four > :nth-last-child(3) + * {
  35.       color: green;
  36.     }
  37.     html body ul.grade.two > :first-child ~ * {
  38.       color: green;
  39.     }
  40.   </style>
  41.   <body>
  42.     <!-- ul.grade$*4>li.clas{class$}*6 -->
  43.     <ul class="grade one">
  44.       <p>伪类 父子关系; box-sizing:border-box</p>
  45.       <li class="clas">class1</li>
  46.       <li class="clas">class2</li>
  47.       <li class="clas">class3</li>
  48.       <li class="clas">class4</li>
  49.       <li class="clas">class5</li>
  50.       <li class="clas">
  51.         父子位置<!-- ul>li.group{group}*3 -->
  52.         <ul>
  53.           <li class="group">group</li>
  54.           <li class="group">group</li>
  55.           <li class="group">group</li>
  56.         </ul>
  57.       </li>
  58.     </ul>
  59.     <!-- <hr /> -->
  60.     <ul class="grade two">
  61.       <p>伪类 同级关系; box-sizing:content-box</p>
  62.       <li class="clas">同级位置</li>
  63.       <li class="clas">class2</li>
  64.       <li class="clas">class3</li>
  65.       <li class="clas">class4</li>
  66.       <li class="clas">
  67.         class5
  68.         <ul>
  69.           <li class="group">group</li>
  70.           <li class="group">group</li>
  71.           <li class="group">group</li>
  72.         </ul>
  73.       </li>
  74.       <li class="clas">class6</li>
  75.     </ul>
  76.     <ul class="grade three">
  77.       <p>伪类 后代关系</p>
  78.       <li class="clas">class1</li>
  79.       <li class="clas">class2</li>
  80.       <li class="clas">
  81.         后代位置
  82.         <ul>
  83.           <li class="group">
  84.             group1
  85.             <ul class="side">
  86.               <li>张三</li>
  87.               <li>李四</li>
  88.               <li>王二</li>
  89.             </ul>
  90.           </li>
  91.           <li class="group">
  92.             group2
  93.             <ul class="side">
  94.               <li>Mike</li>
  95.               <li>David</li>
  96.             </ul>
  97.           </li>
  98.           <li class="group">group3</li>
  99.         </ul>
  100.       </li>
  101.       <li class="clas">class4</li>
  102.       <li class="clas">class5</li>
  103.       <li class="clas">class6</li>
  104.     </ul>
  105.     <hr />
  106.     <ul class="grade four">
  107.       <p>伪类 兄弟关系</p>
  108.       <li class="clas">class1</li>
  109.       <li class="clas">class2</li>
  110.       <li class="clas">class3</li>
  111.       <li class="clas">兄弟位置</li>
  112.       <li class="clas">class5</li>
  113.       <li class="clas">class6</li>
  114.     </ul>
  115.     <hr />
  116.   </body>
  117. </html>

实现效果

伪类及盒子box-sizing属性

注意点

  • padding需要带单位，否则无效
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