6.0选择器系列——CSS选择器、优先级与权重、易混淆伪类区分

用户5478764823586
484 阅读3分钟

本人已参与新人「创作礼活动」，一起开启掘金创作之路。

一、选择器的种类

  1. 通用选择器 *
  2. ID 选择器
  3. class 选择器
  4. 元素选择器
  5. 群组选择器 div, p, .box {}
  6. 后代选择器 div p {}
  7. 儿子选择器 div > p {}
  8. 相邻同辈选择器 div + p {}
  9. 一般同辈选择器 div ~ p {}
  10. 属性 div[title]:hover { cursor: help }
  11. 伪元素 ::after、::before、::first-letter、::first-line
  12. 伪类 (注意顺序) :link、:visited、:hover、:focus、:active
  13. 目标与反选 :target(匹配URL末尾的#号后面的ID)、:not
  14. 结构化伪类 :nth-child(-n+3)、:nth-child(odd奇)、:nth-child(even偶)、:first-child、:last-child、:nth-last-child(-n+3)、:only-child、:only-of-child、:nth-of-type(n)、:nth-last-of-type(n)

3.1 易混淆伪类区分

1、:nth-child(-n+3) 是在父元素下第n个匹配的是 p 元素即高亮

image.png

* { padding: 0; margin: 0; }
.box { width: 200px; border: 3px dashed gold; font-weight: bold;}
.box p:nth-child(odd) { color: red; }

<div class="box">
    <p>我是P标签</p>
    <div>我是div标签</div>
    <p>我是P标签</p>
    <p>我是P标签</p>
    <div>我是div标签</div>
    <p>我是P标签</p>
    <p>我是P标签</p>
    <p>我是P标签</p>
    <p>我是P标签</p>
</div>

2、:nth-of-type(-n+3) 可理解为在父元素下先删除所有非p 的元素后，然后剩余的全部p元素中的第n个进行高亮

image.png

.box p:nth-of-type(-n+3) { color: red; }

3、:only-child 为父元素下只有唯一一个子元素，且该子元素与之匹配才可高亮

image.png

.box p:only-child { color: red; }

<div class="box">
    <p>我是P标签</p>
</div>

4、:only-of-type 为父元素下特定类型的唯一子元素，且该唯一特定子元素与之匹配才可高亮

image.png

.box div:only-of-type { color: red; }

<div class="box">
    <p>我是P标签</p>
    <div>我是div标签</div>
    <p>我是P标签</p>
    <p>我是P标签</p>
</div>

二、权重优先级

  • CSS优先级： !important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

  • 复合选择器: 十进制加权计算法，将选择器划分为4个级别，即a、b、c、d

微信图片_20220411215223.jpg

三、实例验证

3.1 CSS优先级验证

验证方法介绍：

  1. 仅打开 test2、test3，可验证 !important > 行内样式 > ID选择器 > 类选择器 > 标签

  2. 仅打开 test3、test4，可验证 标签 > 通配符

  3. 仅打开 test1、test4，可验证 通配符 > 继承

  4. 仅打开 test1，可验证 继承 > 浏览器默认属性

仅截图其中的第一种情况，见下图：

image.png

<!DOCTYPE html>
<html lang="en">
<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>Flex布局</title>
    <style>
        * { padding: 0; margin: 0; }
        .des { font-weight: bold; }
        .demo { padding: 20px; border: 3px dashed gold; }
        /* test1 */
        .demo { padding: 20px; border: 3px dashed gold; color: pink; }
        /* test2 */
        /* .demo1 #selector-id1 { color: green; font-size: 42px; }
        .demo1 #selector-id2 { color: green; font-size: 42px; }
        .demo1 .selector-class { color: blue; font-size: 32px; }  */
        /* test3 */
        /* .demo1 h4 { color: yellow; font-size: 32px; } */
        /* test4 */
        /* .demo1 * { color: purple; font-size: 24px; } */
    </style>
</head>
<body>
    <div>正常普通文本，以进行对比</div>
    <div>
        方法介绍：<br>
        1. 仅打开 test2、test3，可验证 !important &gt; 行内样式 &gt; ID选择器 &gt; 类选择器 &gt; 标签
        2. 仅打开 test3、test4，可验证 标签 &gt; 通配符
        3. 仅打开 test1、test4，可验证 通配符  &gt; 继承
        4. 仅打开 test1，可验证 继承 &gt; 浏览器默认属性
    </div>
    <div class="demo demo1">
        <div class="des">1、CSS优先级： !important &gt; 行内样式 &gt; ID选择器 &gt; 类选择器 &gt; 标签 &gt; 通配符 &gt; 继承 &gt; 浏览器默认属性</div>
        <h4 style="color: red; font-size: 52px;" id="selector-id1">行内样式</h4>
        <h4 id="selector-id2" class="selector-class">ID选择器</h4>
        <h4 class="selector-class">类选择器</h4>
        <h4>标签</h4>
        <h4>通配符</h4>
        <h4>继承</h4>
        <h4>浏览器默认属性</h4>
    </div>
</body>
</html>

3.2 组合选择器（十进制计算法）

分为四个等级，请自行验证

avatar
文章
阅读
粉丝