Community Learn Tools Library Leisure
search
English
Home > List of blog posts > CSS的上下文选择器使用示例
Blogger Information
Blog 12
fans 0
comment 0
visits 5377
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
CSS的上下文选择器使用示例
汉邦
Original
738 people have browsed it

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>
    效果图：
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：完成的不错，继续加油
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post