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解决方案，这样可以帮助我将code最小化。

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;
}

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

此致

AJ

Answer 2

您可以使用:empty伪类。但是，您的服务器将需要输出不带空格的.attr-marker div。

就像...

<div class="attr-marker"></div>

不是

<div class="attr-marker">
</div>

然后是CSS，

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

其他阅读，https://developer.mozilla.org/en-US/docs/Web/CSS/:empty

Answer 3

从服务器端向该div添加另一个类，如果它将发送内容或将内容包装到另一个元素中并赋予其样式即可。

编辑：

如果您知道元素的确切位置，则可以使用第n个子伪类来选择它：

.attr-marker:nth-child(1):not(:empty) {
  border: 1px solid #333;
  background-color: yellow;
}

Answer 4

写入.attr-marker text { }意味着您要访问带有类text的标签attr-maker的子元素。 HTML中不存在此类标记。

有特定的CSS text和CSS font属性仅适用于文本。它们将用于文本的父元素（在您的情况下为div，类名为attr-marker）：

.attr-marker {
    /* text properties */
    /* some other properties */
}

诸如display: block;，width: 12px;，height: 12px;之类的属性不适用于文本。

话虽如此，您不必担心CSS属性是应用于文本还是应用于整个div。如果使用正确的属性，则可以确保它们仅应用于文本。

对于内容（文本）的存在，您不必担心。如果没有文本，CSS将不会进行任何更改。

Answer 5

如果这些标记是块呈现的元素，则除非它们包含内容，否则浏览器不应显示它们，因此，您可以信任浏览器不呈现不包含任何内容的元素，请使用以下max-width和max-height属性：

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

仅将样式应用于DIV内的文本

5 个答案: