CSS3-:empty、:not()选择器的用法

Bertha 。 2023-07-02 03:22 24阅读 0赞

`:empty` 用于选择指定的没有子元素（包括文本节点）的元素

举个例子：

CSS:

p { 
      width: 200px;
      height: 36px;
      margin: 10px;
      border: 2px solid pink;
    }
    /* 选择所有没有子元素的 p 标签 */
    p:empty { 
      background-color: skyblue;
    }

HTML:

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70]

`:not(selector)` 选择每个元素不是指定的元素或选择器部分；就是取非。

CSS:

span { 
     display: block;
    }
    .box :not(p) { 
      width: 200px;
      margin: 10px;
      color: #fff;
      background-color: purple;
      border: 2px solid orange;
    }

HTML:

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200125000117630.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200125001417851.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ==,size_16,color_FFFFFF,t_70