文章/答案/技术大牛

发布

社区首页 >问答首页 >CSS :空的伪选择器与:在伪元素之后组合

问CSS :空的伪选择器与:在伪元素之后组合
EN

Stack Overflow用户

提问于 2018-12-20 05:04:20

回答 1查看 699关注 0票数 1

我正在寻找一种将:content伪元素添加到空元素的方法，并遇到了:empty CSS伪选择器，它看起来可以达到我所寻找的目的。基本上，我想添加一个像"Nothing found“这样的通用消息:after一个空元素，比如一个列表。

无论出于什么原因，我尝试设置空元素的样式都不起作用，下面是一个示例：https://codepen.io/kylegill/pen/ZVLEBg

这是标记/HTML：

<ul class="list">
</ul>
<!-- ^ Not getting selected by :empty:after  -->
<ul class="list">
  <li>This list is not empty.</li>
</ul>

和CSS：

.list:empty:after {
  content: "Nothing found";
}

reactjs

css

styled-components

回答 1

Stack Overflow用户

发布于 2018-12-20 05:07:20

我找到了帮助回答我问题的this article。

:empty类有一些奇怪的行为，它不会选择包含空格或回车符/换行符的元素。

例如：<div> </div>不会被选中，但<div></div>会被选中。

在此用例中，CSS4规范包括:blank，它将选择带有空格的元素，而:empty不会。

下面是一个更新后的示例：

https://codepen.io/kylegill/pen/vvgYZe

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/53859125

复制

相似问题

问CSS :空的伪选择器与:在伪元素之后组合
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS :空的伪选择器与:在伪元素之后组合EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS :空的伪选择器与:在伪元素之后组合
EN