Question

是否有任何本机支持的方式根据后面的内容选择元素？

我想要为紧跟着p-tag的所有h2标签设置样式。例如：

<body>
    <h2>Heading 1</h2>

    <h2>Heading 2</h2>
    <div>Text</div>

    <h2>Heading 3</h2> <!-- Only this one -->
    <p>Text</p>

    <h2>Heading 4</h2>
    <div>Text</div>

    <h2>Heading 5</h2>
    <div>Text</div>
</body>

Answer 1

目前这在CSS中是不可能的，因为没有选择器可以选择前一个元素。

如果你要使用jQuery，这样的东西就行了。 (example here)

$('p').prev('h2').css('color','red');

支持CSS4 selectors时，我相信您将能够实现此目标。

Answer 2

如果我是你而且我不想使用jQuery，我会简单地使用一个类。

CSS

.h2-with-p{}

HTML

<body>
    <h2>Heading 1</h2>

    <h2>Heading 2</h2>
    <div>Text</div>

    <h2 class="h2-with-p">Heading 3</h2> <!-- Only this one -->
    <p>Text</p>

    <h2>Heading 4</h2>
    <div>Text</div>

    <h2>Heading 5</h2>
    <div>Text</div>
</body>

选择基于直接跟随者的元素

2 个答案: