是否有可能基于兄弟祖先瞄准元素？

Question

我想使用CSS来定位一个特定元素的“堂兄”元素 - 换句话说，它们都是兄弟元素的后代。

我可以基于其“叔叔”或祖先的兄弟来定位元素，如下所示：

HTML：

<div>
    <h2 data-section="name">Name</h2>
    <p class="hint">Full name of the employee</p>
    <p>
        <span class="value1">Joe Tester</span>
    </p>
</div>

<div>
    <h2 data-section="details">Occupation</h2>
    <p class="hint">Job role or title</p>
    <p>
        <span class="value1">Software Engineer</span>
    </p>
</div>

CSS：

/*
 * element that
 *   has a class of value1
 *   and is a descendent of a p
 *     that is next to an h2
 *       with attribute data-section=name 
 */
h2[data-section="name"]~p .value1 {
  color: #F92759;
}

结果：

但是如果data-section="name"元素包含在另一个元素中呢？是否仍然可以使以下HTML与上图相同？

<div>
    <div>
        <h2 data-section="name">Name</h2>
    </div>
    <p class="hint">Full name of the employee</p>
    <p>
        <span class="value2">Joe Tester</span>
    </p>
</div>

实际应用：定位具有特定body元素的网页（meta标记内）中的节点。

示例JSFiddle：http://jsfiddle.net/nchaves/tefpY/

Answer 1

没有针对此的css解决方案。但是，您可以使用jQuery实现此目的：

<script>
    $("[data-section='name']").parent().parent().addClass('myclass');
</script>

<style>
    .myclass .value2 { color: #F92759; }
</style>

JS小提琴： http://jsfiddle.net/tefpY/1/