仅对 DIV 内的文本应用样式答案

【问题标题】：Apply styling only on the text inside a DIV仅对 DIV 内的文本应用样式
【发布时间】：2021-09-03 03:52:36
【问题描述】：

我在HTML 中有一个div，它是从服务器端动态创建的。我想在HTML(front-end) 中应用css 仅在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 解决方案，所以它可以帮助我最小化代码。

【问题讨论】：

css 样式选择器中的文本是什么？
它可以是div 中的任何文本，其中包含class: attr-marker。
我认为它不存在。 w3 文档中不存在标签名称“text”。
是的，我知道。这只是一个样本。
好的。明白了。

标签： javascript html css

【解决方案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

【讨论】：

似乎空格和图标使 div 不为空。如果可以的话，您可以删除 div 中的所有空格（包括换行符），然后尝试使其工作。否则，似乎 jQuery 或 JavaScript 可能是唯一的选择。
忽略我上面的评论中的和图标。放错了:)

【解决方案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

【讨论】：

这是一个例子，jsfiddle.net/wu9jc8xd/6。我想这就是你的意思？
我希望 <div class="attr-marker">text</div> 出现在您对 jsfiddle 的第一个标签中。
好的，你会想要这个，jsfiddle.net/wu9jc8xd/7。我认为@AJ7 已经提到过。示例中第二个 div 应用样式的原因是因为空白。

【解决方案3】：

编写.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 不会改变任何东西。

【讨论】：

我知道.attr-marker text { }，这只是为了样本。我还想要text-background 的样式，这是不可用的。
这是 CSS。如果 CSS 中没有 text-background 属性，则不能请求它。更改文字背景在other ways中实现

【解决方案4】：

如果要发送内容，则从服务器端向该 div 添加另一个类，或者用另一个元素包装内容并为其赋予一些样式。

编辑：

如果您知道元素的确切位置，则可以使用 nth-child 伪类选择它：

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

【讨论】：

如果我未经授权获得服务器访问权限怎么办！！ :-P

【解决方案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
}

【讨论】：