伪类选择器与选择器权重的实例及盒子计算大小

编辑: 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.     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需要带单位，否则无效
【文章转自高防服务器 http://www.558idc.com 复制请保留原URL】
更多阅读