如何使用CSS定位元素中的文本而不是嵌套元素中的文本

时间:2016-05-27 23:01:18

标签: html css

我在div中有一个强标记,在div内部(强元素之前)我有文字:

<div class="div1">
    "Text"
    <strong>
        "Text 2"
    </strong>
</div>

我想将样式应用于.div1,但不是强元素。

3 个答案:

答案 0 :(得分:1)

无法使用CSS选择文本节点或设置样式。如果您只想选择文本,则需要使用另一个元素(添加可以设置样式的额外节点),如下所示:

<div class="div1">
    <span>"Text"<span>
    <strong>
        "Text 2"
    </strong>
</div>

CSS:

.div1 span {
    /* Your rules */
}

从我的评论中添加:

您还可以考虑将样式应用于div,然后将样式应用于反转该样式的strong。作为示例情况,您的文档的默认文本颜色为黑色,并且您希望以div红色创建文本,但strong元素除外。因此,您将红色文本颜色应用于div,将黑色文本颜色(基本上将红色反转)应用于strong元素。

答案 1 :(得分:0)

我自己找到了答案

.div1 {
    visibility: collapse;
    font-size: 0px;
}

.div1 strong {
    visibility: visible;
    font-size: 11px;
}

感谢大家的帮助=)

答案 2 :(得分:0)

您可以使用以下两个CSS规则来执行此操作:

.div1 {
  color: red;
}
.div1 strong {
  color: initial;
}

第一个为整个div设置属性,第二个为strong标记重置它。

这是一个codepen:http://codepen.io/anon/pen/LZYZPp