程序實現

<!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

批改狀態(tài)：合格

老師批語：

本博文版權歸博主所有，轉載請注明地址！如有侵權、違法，請聯系admin@php.cn舉報處理！

全部評論文明上網理性發(fā)言，請遵守新聞評論服務協議

0條評論

作者最新博文

開學第一課

2023-03-10 16:14:27

亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

程序實現

實現效果

注意點