CSS的上下文选择器使用示例

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网
CSS 基础1. 标签
  1. <video>: 视频元素
  2. <audio>: 音频元素
  3. <iframe>: 内联框架标签
2. 元素来源
  1. 预定义(浏览器默认的)
  2. 自定义(用户自己写的)
  3. 继承样式(简化,例如字体,字号,前景色)
    如图：


3. 自定义样式类型
  1. 行内样式:ele.style, 当前元素
  2. 文档样式: <style>, 当前文档
  3. 外部样式: xxx.css, 引用它的文档
4. 选择器

元素 = 标签 + 属性

4.1 基本选择器
  1. 标签选择器
  2. 属性选择器
4.2 上下文选择器

元素的位置与层级来匹配

  1. 父子: > (仅限父子)
    代码演示：

    1. <body>
    2.  <ul class="list">
    3.      <li class="item">青铜1</li>
    4.      <li class="item">白银2</li>
    5.      <li class="item">黄金3</li>
    6.      <li class="item">铂金4</li> 
    7.      <li class="item">钻石5</li>
    8.      <li class="item">星耀6</li>
    9.      <li class="item">王者6
    10.          <ul>
    11.              <li class="item">最强王者</li>
    12.              <li class="item">传奇王者</li>
    13.              <li class="item">百星王者</li>
    14.          </ul>
    15.      </li>
    16.      <li class="item">宗师7</li>
    17.      <li class="item">大神8</li>
    18.  </ul>
    19.  <style>
    20.      .list > .item {
    21.          border: 2px solid rgb(30, 186, 210);
    22.          }
    23.  </style>
    24. </body>

    效果图：

  2. 后代: 空格 (后级所有元素,包括子集,孙子,重孙…)
    代码演示：

    1. <body>
    2.  <ul class="list">
    3.      <li class="item">青铜1</li>
    4.      <li class="item">白银2</li>
    5.      <li class="item">黄金3</li>
    6.      <li class="item">铂金4</li> 
    7.      <li class="item">钻石5</li>
    8.      <li class="item">星耀6</li>
    9.      <li class="item">王者6
    10.          <ul>
    11.              <li class="item">最强王者</li>
    12.              <li class="item">传奇王者</li>
    13.              <li class="item">百星王者</li>
    14.          </ul>
    15.      </li>
    16.      <li class="item">宗师7</li>
    17.      <li class="item">大神8</li>
    18.  </ul>
    19.  <style>
    20.      .list .item {
    21.          border: 2px solid rgb(30, 186, 210);
    22.          }
    23.  </style>
    24. </body>

    效果图：

  3. 兄弟: + (相邻的下一个元素,紧跟的且只有一个)
    代码演示：

    1. <body>
    2.  <ul class="list">
    3.      <li class="item">青铜1</li>
    4.      <li class="item">白银2</li>
    5.      <li class="item">黄金3</li>
    6.      <li class="item four">铂金4</li> 
    7.      <li class="item">钻石5</li>
    8.      <li class="item">星耀6</li>
    9.      <li class="item">王者7</li>
    10.      <li class="item">宗师8</li>
    11.      <li class="item">大神9</li>
    12.  </ul>
    13.  <style>
    14.      .list>.item.four + *{
    15.          background-color: aqua;
    16.          }
    17.  </style>
    18. </body>

    效果图：

  4. 同级: ~(与当前元素同级的后面的全部元素)
    代码演示：
    1. <body>
    2.  <ul class="list">
    3.      <li class="item">青铜1</li>
    4.      <li class="item">白银2</li>
    5.      <li class="item">黄金3</li>
    6.      <li class="item four">铂金4</li> 
    7.      <li class="item">钻石5</li>
    8.      <li class="item">星耀6</li>
    9.      <li class="item">王者7</li>
    10.      <li class="item">宗师8</li>
    11.      <li class="item">大神9</li>
    12.  </ul>
    13.  <style>
    14.      .list>.item.four ~ *{
    15.          background-color: aqua;
    16.          }
    17.  </style>
    18. </body>
    效果图：
【文章原创作者：东台网站建设 http://www.1234xp.com/dongtai.html 复制请保留原URL】
更多阅读