Question

抱歉标题不好，真的不知道如何描述更好。页面看起来像这样

注意：data-id是随机的，我事先并不知道。

<main>
    <h2 class="title">title1</h2>
    <div id="1-3" class="content" data-id="1"></div>
    <div id="1-2" class="content" data-id="1"></div>
    <div id="1-1" class="content" data-id="1"></div>

    <h2 class="title">title2</h2>
    <div id="2-11" class="content" data-id="2"></div>
    <div id="2-10" class="content" data-id="2"></div>
    <div id="2-9" class="content" data-id="2"></div>

    <h2 class="title">title3</h2>
    <div id="3-18" class="content" data-id="3"></div>
    <div id="3-17" class="content" data-id="3"></div>
    <div id="3-16" class="content" data-id="3"></div>
</main>

有没有办法在纯CSS中的每个h2之后隐藏除了最后一个内容div之外的所有内容？我不能单独使用id或data-id来定位它们。有没有办法选择具有相同未指定属性的所有元素？所以选择所有data-id =“same”然后我可以取消隐藏nth-last-child（1）？我怀疑有这样的事情。有没有办法用CSS实现这个目标？

我目前正在隐藏每个.content如果下一个兄弟不是.content与js但是想知道它是否可以用CSS。

Answer 1

没有任何脚本就不可能......你需要使用javascript或Jquery

Answer 2

我很想建议每个块

<h2 class="title">title2</h2>
<div id="2-11" class="content" data-id="2"></div>
<div id="2-10" class="content" data-id="2"></div>
<div id="2-9" class="content" data-id="2"></div>

在<section>内，如下所示：

<section>
<h2 class="title">title2</h2>
<div id="2-11" class="content" data-id="2"></div>
<div id="2-10" class="content" data-id="2"></div>
<div id="2-9" class="content" data-id="2"></div>
</section>

然后你可以......

div {
display: none;
width: 200px;
height: 40px;
color: rgb(255,255,255);
}

section:nth-of-type(1) div {
background-color: rgb(255,0,0);
}

section:nth-of-type(2) div {
background-color: rgb(0,127,0);
}

section:nth-of-type(3) div {
background-color: rgb(0,0,255);
}

section div:last-of-type {
display: block;
}

<main>
    <section>
    <h2 class="title">Title 1</h2>
    <div id="1-3" class="content" data-id="1">Div 1</div>
    <div id="1-2" class="content" data-id="1">Div 2</div>
    <div id="1-1" class="content" data-id="1">Div 3</div>
    </section>

    <section>
    <h2 class="title">Title 2</h2>
    <div id="2-11" class="content" data-id="2">Div 1</div>
    <div id="2-10" class="content" data-id="2">Div 2</div>
    <div id="2-9" class="content" data-id="2">Div 3</div>
    </section>

    <section>
    <h2 class="title">Title 3</h2>
    <div id="3-18" class="content" data-id="3">Div 1</div>
    <div id="3-17" class="content" data-id="3">Div 2</div>
    <div id="3-16" class="content" data-id="3">Div 3</div>
    </section>
</main>

CSS在不同的班级

2 个答案: