css - 是否可以根据兄弟祖先定位元素？

Question

我想使用 CSS 定位一个元素，该元素是特定元素的“表亲”——换句话说，它们都是同级元素的后代。

我可以根据元素的“叔叔”或祖先的 sibling 来定位元素，如下所示:

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>

实际应用:定位页面中具有特定 meta 元素的节点(在 body 标记内)。

示例 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 Fiddle 在这里: http://jsfiddle.net/tefpY/1/