程序实现

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>上下文选择器</title>
  </head>
  <style>
    p {
      color: lightseagreen;
      font-weight: bold;
    }
    .grade.one,
    .grade.two {
      width: 400px;
      height: 300px;
      border: 3px solid red;
      display: inline-block;
      padding: 25px 35px;
    }
    .grade.one {
      box-sizing: border-box;
    }
    .grade.two {
      box-sizing: content-box;
    }
    .grade.one > :last-child > * {
      color: red;
    }
    ul.grade.three > :nth-child(3) * {
      color: green;
    }
    body ul.grade.four > :nth-last-child(3) + * {
      color: green;
    }
    html body ul.grade.two > :first-child ~ * {
      color: green;
    }
  </style>
  <body>
    <!-- ul.grade$*4>li.clas{class$}*6 -->
    <ul class="grade one">
      <p>伪类 父子关系; box-sizing:border-box</p>
      <li class="clas">class1</li>
      <li class="clas">class2</li>
      <li class="clas">class3</li>
      <li class="clas">class4</li>
      <li class="clas">class5</li>
      <li class="clas">
        父子位置<!-- ul>li.group{group}*3 -->
        <ul>
          <li class="group">group</li>
          <li class="group">group</li>
          <li class="group">group</li>
        </ul>
      </li>
    </ul>
    <!-- <hr /> -->
    <ul class="grade two">
      <p>伪类 同级关系; box-sizing:content-box</p>
      <li class="clas">同级位置</li>
      <li class="clas">class2</li>
      <li class="clas">class3</li>
      <li class="clas">class4</li>
      <li class="clas">
        class5
        <ul>
          <li class="group">group</li>
          <li class="group">group</li>
          <li class="group">group</li>
        </ul>
      </li>
      <li class="clas">class6</li>
    </ul>
    <ul class="grade three">
      <p>伪类 后代关系</p>
      <li class="clas">class1</li>
      <li class="clas">class2</li>
      <li class="clas">
        后代位置
        <ul>
          <li class="group">
            group1
            <ul class="side">
              <li>张三</li>
              <li>李四</li>
              <li>王二</li>
            </ul>
          </li>
          <li class="group">
            group2
            <ul class="side">
              <li>Mike</li>
              <li>David</li>
            </ul>
          </li>
          <li class="group">group3</li>
        </ul>
      </li>
      <li class="clas">class4</li>
      <li class="clas">class5</li>
      <li class="clas">class6</li>
    </ul>
    <hr />
    <ul class="grade four">
      <p>伪类 兄弟关系</p>
      <li class="clas">class1</li>
      <li class="clas">class2</li>
      <li class="clas">class3</li>
      <li class="clas">兄弟位置</li>
      <li class="clas">class5</li>
      <li class="clas">class6</li>
    </ul>
    <hr />
  </body>
</html>

实现效果

伪类及盒子box-sizing属性

注意点

padding需要带单位，否则无效

批改老师：

PHPz

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

开学第一课

2023-03-10 16:14:27

首页

最新更新

视频教程

学习路径

资源下载

技术文章

社区

微信公众号

程序实现

实现效果

注意点