选择器权重与上下文选择器 - 作业

首页 > 博客列表 > 选择器权重与上下文选择器

博主信息

博文 16

粉丝 0

访问量 17657

专题推荐

更多>

一、选择器权重

1.选择器的特殊性值表述为4个部分，用0,0,0,0表示。或者千[!important]，百[id]，十[class]，个[tag]

ID选择器的特殊性值，0,1,0,0。
类选择器、属性选择器或伪类，0,0,1,0。
元素和伪元素，0,0,0,1。
通配选择器*对特殊性没有贡献，即0,0,0,0。
最后比较特殊的一个标志!important（权重），它没有特殊性值，但它的优先级是最高的

<style>
        /* h1标签的类选择器 ID选择器  */
        .ccc {background-color: yellow;}                /*特殊性值0,0,1,0 */
        #ttt {background-color: yellowgreen;}           /*特殊性值0,1,0,0 */
        /* p标签的类选择器 ID选择器 */
        #bbb {background-color: violet;}                /*特殊性值0,1,0,0 */
        .aaa {background-color: royalblue;}             /*特殊性值0,0,1,0 */
        h1 {background-color: seagreen;}                /*特殊性值0,0,0,1 */
        body h1 {background-color: cyan;}               /*特殊性值0,0,0,2 */
        body .ddd {background-color: darkmagenta; }     /*特殊性值0,0,2,0 */
        p { background-color: red;}                     /*特殊性值0,0,0,1 */
        body p {background-color: burlywood;}           /*特殊性值0,0,0,2 */
    </style>

<body>
    <h1 style="background-color: sienna" class="ccc" id="ttt">这是棕色</h1>     <!--特殊性值0,1,0,0 -->
    <p class="aaa" id="bbb">这应该是紫罗兰颜色</p>      <!-- 适用第十三行代码-->
    <!-- style > ID > class > tag -->
</body>

二、上下文选择器

1.子元素选择器`>` `.list>li`选择 .list 后代直接子元素

<ul class="list">
      <li>item1</li>
      <li>item2</li>
      <li class="item">item3</li>
      <li>item4</li>
      <li>item5</li>
      <li>item6</li>
      <li>item7</li>
      <li>item8</li>
    </ul>

      /* 子元素选择器 > */
      .list > li {
        border: 1px solid red;
      }

2.后代选择器`空格` `.list li`选择 .list 后代的所有 li 元素

        /* 后代选择器  空格 */
      .list li {
        border: 1px solid red;
      }

3.相邻选择器 next 下一个`+` `.list .item + *`的后续下一个兄弟元素

        /* 相邻选择器 next 下一个 */
      .list .item + * {
        background-color: seagreen;
      }

4.所有兄弟选择器`~` `.list .item ~ `: 选择 .list 的后续兄弟元素 ``号为通用标识符

      /*所有兄弟选择器*/
      .list .item ~ * {
        background-color: steelblue;
      }

批改老师：

PHPz

批改状态：合格

老师批语：

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

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

0条评论

作者最新博文

HTML表单和常用属性

2023-03-14 01:05:30

一、选择器权重

1.选择器的特殊性值表述为4个部分，用0,0,0,0表示。或者千[!important]，百[id]，十[class]，个[tag]

二、上下文选择器

1.子元素选择器> .list>li选择 .list 后代直接子元素

2.后代选择器空格 .list li选择 .list 后代的所有 li 元素

3.相邻选择器 next 下一个+ .list .item + *的后续下一个兄弟元素

4.所有兄弟选择器~ .list .item ~ *: 选择 .list 的后续兄弟元素 *号为通用标识符

1.子元素选择器`>` `.list>li`选择 .list 后代直接子元素

2.后代选择器`空格` `.list li`选择 .list 后代的所有 li 元素

3.相邻选择器 next 下一个`+` `.list .item + *`的后续下一个兄弟元素

4.所有兄弟选择器`~` `.list .item ~ `: 选择 .list 的后续兄弟元素 ``号为通用标识符