javascript - 仅对 DIV 内的文本应用样式

Question

我有一个 div在 HTML这是从服务器端动态创建的。我要申请css在 HTML (前端)仅在 div 上当且仅当它有一些内容。如果它没有任何内容，那么我就不需要应用新的样式。

样本HTML代码是:

<div class="attr-marker">
    Some-text-content        <!-- Apply New Styling on it -->
</div>

<div class="attr-marker">
    <!-- No need of new styling -->
</div>

<div class="attr-marker">
    <!-- No need of new styling -->
    <i class="fas fa-car" style="color:#d42424;font-size:px"></i>
</div>

还有 CSS我尝试但失败的是:

.attr-marker text {
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    line-height: 12px;
    font-size: 9px;
    text-align: center;
    background: #000;
    color: #fff;
}

我可以通过使用 javascript 来实现它但我纯粹想要CSS解决方案，因此它将帮助我最小化代码。

Answer 1

您可以使用 :empty 伪选择器为空 div 设置默认样式。然后对于常规 div，只需按照上面给出的样式设置即可。

或者你可以使用:not(:empty)伪选择器为非空的div设置样式。

这是一个例子:

.attr-marker:not(:empty) {
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    line-height: 12px;
    font-size: 9px;
    text-align: center;
    background: #000;
    color: #fff;
}

如果您有任何问题，请告诉我。

问候，

阿杰