是否可以选择不是文本前面的元素？ [英] Is it possible to select elements not preceded by text?

问题描述

我需要一个CSS选择器，它与< code> 中的<$ p
$ b

 < p为H.;<代码> FOO< /代码>巴≤; / p为H. 
  

但不是< code> in ：

 < p> foo< code> bar< / code>< / p> 
  

code：first-child 不会工作。它与两者都匹配。

只是因为我认为它不可能。

我想我会在放弃之前给社区一个镜头。

---

编辑 - 人们将其标记为重复，所以让我清楚一点：如果当前的最佳答案是正确的，那么你所引用的问题的答案具有相同的根源，但这并不是同一个问题。这两个问题的答案完全可能不同 - 如果不是这样，那么为什么只能回答这个问题，而不是那个问题。

解决方案

您的段落中有两个元素。

 < code> ;巴≤; /代码> 
  

和

 <匿名直列盒> FOO< /匿名直列盒> 
  

匿名内联元素是自动生成的，不能被CSS定位。因此，无法将样式应用于相对于文本节点的代码元素。

如果包装

以下是来自spec的更多细节： b

9.2.2.1匿名inline
boxes

任何直接包含在块容器元素中的文本都必须被视为匿名内联元素。 / p>

这些匿名内联框从其父框中继承可继承的属性。

I want a CSS selector that matches the <code> in:

<p><code>foo</code> bar</p>

but not the <code> in:

<p>foo <code>bar</code></p> 

code:first-child doesn't work. It matches both.

Asking just because I don't think it's possible.

I figured I'd give the community a shot before giving up.

---

Edit - people keep marking this as duplicate, so let me be clear: if the current top answer is correct then the answer to the question you're referencing has the same root cause, but that does not make it the same question. It is entirely possible for the answers to the two questions to differ--or if it isn't, the "why" of that is an answer only to this question, not that one.

解决方案

There are two elements in your paragraph.

<code>bar</code>

and

<anonymous-inline-box>foo</anonymous-inline-box>

Anonymous inline elements are automatically generated and cannot be targeted by CSS. Therefore, there is no way to apply styles to the code element relative to the text node.

If wrapping the text in an actual element isn't an option, then try JavaScript.

Here are some more details from the spec:

9.2.2.1 Anonymous inline boxes

Any text that is directly contained inside a block container element must be treated as an anonymous inline element.

Such anonymous inline boxes inherit inheritable properties from their block parent box.

这篇关于是否可以选择不是文本前面的元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！