css - 与特定班级的姐姐的关系

Question

不确定这是否可行，css但我想做的是

说，你有你的html结构如下： -

<h4>Title <span class="specific"> text </span> </h4>
<div>
    <p> This is some text. </p>
</div>

现在，我想为div p元素设置样式，但我想h4 span.specific用作关系div p元素的关系。

使用括号，它可能看起来像这样。(h4 span.specific) ~ (div p)

只是想知道这是否可以仅使用 CSS 来完成。

score 2 · Accepted Answer

不幸的是，选择器由单个元素（+伪类）之间的关系组成。你想在选择器之间建立关系，这在今天是不可能的，而且在 CSS4 中也不会。

问题是，如果您使用 CSS 在 DOM 树中向下遍历，则根本无法向上遍历（除了Determining the subject of a selector selector !），因此无法创建这种关系。

为了解决这个问题，您必须能够在h4 > span.specific不查看的情况下识别span的情况下识别，例如在上应用类h4。

score 0 · Accepted Answer

括号不是有效的 CSS 选择器运算符。

选择器和组合器的顺序是从右到左读取的。

<h4 class="specificParent">Title <span class="specific"> text </span> </h4>
<div>
    <p> This is some text. </p>
</div>

CSS：

h4.specificParent~div>p {
    background-color: red;
 }

它将上述语句解释为

选择一个 p 元素，其父 div 是 h4 的兄弟，具有 specificParent 类

请在此处找到工作演示：演示

score 0 · Accepted Answer

你只能通过这个来实现

我找不到任何其他解决方案

h4 ~ div p{
   color:green 

}

score 0 · Accepted Answer

CSS 真的很强大，会帮助你做到这一点。

而不是 (h4 span.specific) ~ (div p)，使用

h4 > span.specific + div > p

希望有帮助。

编辑：

您不能指定 span.specific，但是您可以在 div 中说 ap，然后是 h4，即

h4 + div > p.

为混乱道歉。

4 回答 4