search

博客列表 >伪类选择器与选择器权重的实例及盒子计算大小box-sizing属性的功能演示

伪类选择器与选择器权重的实例及盒子计算大小box-sizing属性的功能演示

len
len原创
2023年03月16日 15:40:26234浏览

程序实现

  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需要带单位，否则无效
上一条：伪类选择器和选择器的权重详解下一条：伪类选择器与盒模型
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多