• 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

1、2后代选择器

武飞扬头像
这一片月
帮助1

提示:后代选择器:又称之为包含选择器,主要是父类包含子类。

1、语法:

          样式1   样式2{

                   样式说明

                         }

注意:(1)、上面语法,在样式1和样式2之间用空格隔开

           (2)、只有样式2是样式1后代才能是后代选择器

(3)、元素1是父类,而元素2是子类,比如:

 ol   li{

        color:pink;

        }

(4)、在后面只能一层一层检查,比如:

ol li a{

      color:pink;

          }

自己代码展示:

  1.  
    <!DOCTYPE html>
  2.  
    <html lang="en">
  3.  
     
  4.  
    <head>
  5.  
    <meta charset="UTF-8">
  6.  
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.  
    <title>后代选择器</title>
  9.  
    <style>
  10.  
    /* 什么是后代选择器:就是一个父类里面必须包含一个子类、而这个子类一定是在父类的包含下 */
  11.  
    /* 这个时候我们要把这个小丽改颜色pink */
  12.  
     
  13.  
    ul li {
  14.  
    color: pink;
  15.  
    }
  16.  
     
  17.  
    ul li a {
  18.  
    /* 这个就是后代选择器:我们可以一层一层去设置他 、它的父类就是“ul”、而子类就是“li”、而小丽的孩子也是子类“a”*/
  19.  
    color: red;
  20.  
    }
  21.  
     
  22.  
    .nav li a {
  23.  
    /* 这里有一个口诀:样式点定义、结构class调用、一个或多个 */
  24.  
    color: aqua;
  25.  
    }
  26.  
    </style>
  27.  
    </head>
  28.  
     
  29.  
    <body>
  30.  
    <ul>
  31.  
    <li>我是小丽</li>
  32.  
    <li>我是小丽</li>
  33.  
    <li>我是小丽</li>
  34.  
    <li>我是小丽</li>
  35.  
    <li><a href="#">我是小丽的孩子</a></li>
  36.  
    </ul>
  37.  
     
  38.  
    <ul class="nav">
  39.  
    <!-- 如果有两个一样的我们可以取一个class名字来区分 -->
  40.  
    <li>我是小丽</li>
  41.  
    <li>我是小丽</li>
  42.  
    <li>我是小丽</li>
  43.  
    <li>我是小丽</li>
  44.  
    <li><a href="#">我是小丽的孩子</a></li>
  45.  
    <li><a href="#">我是小丽的孩子</a></li>
  46.  
    <li><a href="#">我是小丽的孩子</a></li>
  47.  
    <li><a href="#">我是小丽的孩子</a></li>
  48.  
    </ul>
  49.  
    <ol>
  50.  
    <li>我是小明</li>
  51.  
    <li>我是小明</li>
  52.  
    <li>我是小明</li>
  53.  
    <li>我是小明</li>
  54.  
    </ol>
  55.  
     
  56.  
    <dl>
  57.  
    <dt>
  58.  
    <dd>名字</dd>
  59.  
    <dd>我是小花</dd>
  60.  
    <dd>我是小花</dd>
  61.  
    <dd>我是小花</dd>
  62.  
    </dt>
  63.  
    </dl>
  64.  
    </body>
  65.  
     
  66.  
    </html>
学新通

显示结果:

学新通


总结

这篇好文章是转载于:学新通技术网

  • 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
  • 本站站名: 学新通技术网
  • 本文地址: /boutique/detail/tanhhfgakf
系列文章
更多 icon
同类精品
更多 icon
继续加载