使用CSS选择文本节点

Question

我有以下HTML标记：<h1>      <div class="sponsor">           <span>Hello</span>       </div>      World </h1>当我使用CSS选择器时，h1我得到了Hello World。是否有我只能接受文本节点的CSS选择器？具体World在这个例子中？编辑：不幸的是，我不能更改标记，而只能使用CSS选择器，因为我使用的是聚合rss feed的系统。

Answer 1

CSS的当前状态无法执行此操作，请检查以下链接：W3C

这里的问题是您写入屏幕的内容没有显示在DOM：P中。

也::outside似乎还行不通（至少在Safari 6.0.3中对我来说），或者它根本还没有产生预期的结果。

检查我的小提琴，然后检查DOM源：JSfiddle

最后是属性选择器a { content: attr(href);}，使CSS能够读取DOM节点属性。似乎还没有innerHTML类似的东西。如果可能的话，那将是很好的选择，而您也许可以操纵标签的内部标记。

Answer 2

这几乎与我上周提出的问题相反：可以在不使用纯CSS的类或标识符的情况下，选择容器内的第一个元素（否则为纯文本）吗？

最简洁的答案是不。"World"在此示例中，它不是其自身的元素-因此无法选择它。

您在这里要做的是设置样式，h1然后使用覆盖样式div.sponsor。例如，如果您希望此处的“世界”具有黑色背景和白色文本，则可以使用类似以下内容的东西：

h1 {

    background:black;

    color:white;

}

h1 div.sponsor {

    background:white;

    color:black;

}

不幸的是，但是，如果您只想要设置“ World”一词的样式，并且您的标记不仅仅包含<div>Hello</div> World Foo诸如之内的标记，那么这将是行不通的。

我认为在这种情况下，纯CSS不可能仅将 “ World”设置为样式。

Answer 3

解决方法：

h1 {

  color: red;

}

h1 * {

  color: lime;

}

<h1> 

     <div class="sponsor"> 

          <span>Hello</span>  

     </div> 

     World 

</h1>