与具有特定班级的姐妹的关系

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完成。

Answer 1

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

问题是，如果你使用CSS遍历DOM树，那么就没有办法遍历（除了确定选择器的主题选择器!），所以不能创造这样的关系。

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

参考文献：

• http://dev.w3.org/csswg/selectors4/#overview
• http://www.w3.org/TR/css3-selectors/#selectors

Answer 2

CSS非常强大，可以帮助您实现这一目标。

而不是（h4 span.specific）〜（div p），使用

h4 > span.specific + div > p

希望有所帮助。

编辑：

你不能指定span.specific，但你可以说div里面有一个p后跟一个h4，即

h4 + div > p.

为混乱道歉。

Answer 3

括号不是有效的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 这是具有specificParent类

的h4的兄弟

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

Answer 4

你只能通过这个来实现这个目标

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

<强> http://jsfiddle.net/8QBkz/

h4 ~ div p{
   color:green 

}