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

最新推荐文章于 2024-11-04 08:38:26 发布

原创最新推荐文章于 2024-11-04 08:38:26 发布 · 1.4k 阅读

CC 4.0 BY-SA版权

20 篇文章

订阅专栏

本文介绍了CSS3中`:empty`和`:not()`选择器的使用方法。`:empty`用于选取没有子元素（包括文本节点）的元素，而`:not()`则用于选取不符合指定条件的元素。通过示例代码展示了这两个选择器在实际场景中的应用。

部署运行你感兴趣的模型镜像

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

举个例子：

CSS:

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

HTML:

<p></p>
<!-- 第二个 p 元素有文本子节点 -->
<p> </p>
<p></p>

在这里插入图片描述

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

CSS:

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

HTML:

<div class="box">
  <h3>h3 标签</h3>
  <p>p标签</p>
  <span>span 标签</span>
  <p>p标签</p>
  <div>div 标签</div>
  <p>p标签</p>
</div>

在这里插入图片描述

您可能感兴趣的与本文相关的镜像

Stable-Diffusion-3.5

图片生成

Stable-Diffusion

Stable Diffusion 3.5 (SD 3.5) 是由 Stability AI 推出的新一代文本到图像生成模型，相比 3.0 版本，它提升了图像质量、运行速度和硬件效率