Question

我有以下HTML标记：

<h1> 
     <div class="sponsor"> 
          <span>Hello</span>  
     </div> 
     World 
</h1>

当我使用CSS选择器h1时，我得到Hello World。

是否有任何CSS选择器我只能使用文本节点？具体来说，这个例子中的World是什么？

编辑：

我不能遗憾地更改标记，我只能使用CSS选择器，因为我使用聚合rss feed的系统。

Answer 1

这几乎与我上周提出的问题相反：Is it possible to select the very first element within a container that's otherwise pure text without using classes or identifiers in pure CSS?

简短的回答是否定的。此示例中的"World"不是它自己的元素 - 因此无法选择它。

您需要做的是h1样式，然后使用div.sponsor覆盖该样式。例如，如果你想在这里使用带有白色文字的黑色背景的“世界”，你可以使用类似的东西：

h1 {
    background:black;
    color:white;
}

h1 div.sponsor {
    background:white;
    color:black;
}

不幸的是，如果你只想要“世界”这个词，并且你的标记不仅仅是<div>Hello</div> World Foo中的那个，那么这就行不通了。

在这种情况下，我不相信用纯CSS来设置只是“世界”。

Answer 2

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

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

::outside似乎还没有工作（至少对我来说是在Safari 6.0.3中），或者它还没有产生预期的结果。

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

最后有属性选择器a { content: attr(href);}，使CSS能够读取DOM节点属性。似乎还没有innerHTML等价物。如果可能的话，那将是很棒的，而你可能能够操纵标签的内部标记。

Answer 3

我也遇到了同样的问题，我无法触摸标记并且无法控制js。我需要在div元素中隐藏文本节点，但要保持可见的元素。所以这是我的解决方案：

标记：

<div id="settings_signout_and_help">
        <a id="ctl00_btnHelpDocs" class="ico icoHelp" href="http://" Help Guide</a>
            Signed in as: <a id="ctl00_lUsr" href="Profile.aspx">some</a>&nbsp;&nbsp;
            <a href="Logout.aspx">Home</a>
                Sign out
        </div>

css：

#settings_signout_and_help {
font-size: 1px !important;
}

#settings_signout_and_help a {
font-size: 13px !important;
}

希望这有助于家伙！

Answer 4

有点变通方法：

＆＃13;

h1 {
  color: red;
}
h1 * {
  color: lime;
}

＆＃13;

<h1> 
     <div class="sponsor"> 
          <span>Hello</span>  
     </div> 
     World 
</h1>

＆＃13;

Answer 5

我遇到了类似的问题，我不得不从C＃函数生成的html中删除“World”文本。

我在'h1'元素上将font-size设置为0，然后将我的css应用于div类。基本上隐藏了额外的文本，但保留了div中的内容。

Answer 6

我不知道如何使用CSS，但是......

使用JQuery，您可以选择除子元素

中的内容之外的所有元素

$（“h1：not（h1＆gt; div）”）。css（）并在那里放置你想要的任何CSS效果。

使用CSS选择文本节点

6 个答案: