13

我有以下 HTML 标记：

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

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

不幸的是，我不能更改标记，我只能使用 CSS 选择器，因为我使用的是聚合 RSS 提要的系统。

是否有任何 CSS 选择器我只能采用文本节点？特别是World在这个例子中？

4

6 回答 6

4

CSS的当前状态不能做到这一点，检查这个链接：W3C

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

也::outside似乎还没有工作（至少对我来说在 Safari 6.0.3 中）或者它根本没有产生所需的结果。

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

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

于 2013-03-26T17:06:03.447 回答
3

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

最简洁的答案是不。"World"在这个例子中 不是它自己的元素 - 因此没有办法选择它。

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

h1 {
    background:black;
    color:white;
}

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

然而不幸的是，如果您只想要“World”这个词的样式并且您的标记不仅仅包含在 中<div>Hello</div> World Foo，那么这将不起作用。

我不相信在这种情况下使用纯 CSS 来设置“世界”样式是可能的。

于 2013-03-26T16:15:36.333 回答
3

一点解决方法：

h1 {
  color: red;
}
h1 * {
  color: lime;
}
<h1> 
     <div class="sponsor"> 
          <span>Hello</span>  
     </div> 
     World 
</h1>

于 2015-03-05T14:43:19.850 回答
1

我也遇到了同样的问题，我无法触摸标记并且无法控制 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;
}

希望这对大家有帮助！

于 2013-07-15T09:16:16.137 回答
0

我有一个类似的问题，我必须从 C# 函数生成的 html 中删除“世界”文本。

我在“h1”元素上将字体大小设置为 0，然后将我的 css 应用于 div 类。基本上隐藏额外的文本，但将内容保留在 div 中。

于 2015-05-18T19:38:17.243 回答
-3

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

使用 JQuery，您可以选择其中的所有元素，但其子元素中的内容除外

$("h1:not(h1 > div)").css() 并在其中放置您想要的任何CSS效果。

于 2016-03-07T19:07:34.147 回答