CSS在不同类之前选择最后一个类
CSS在不同类之前选择最后一个类
提问于 2016-12-10 06:13:32
抱歉，标题不好，真不知道怎么更好地描述。页面看起来像这样
注意:数据ids是随机的，我事先不知道。
<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>在纯h2中，除了最后一个内容div之外，还有任何方法隐藏每个之后的所有内容div吗？我不能单独用身份证或数据识别来瞄准他们。是否有任何方法选择具有相同未指定属性的所有元素？所以所有的数据-id=“相同”都被选中了，然后我就可以隐藏第n个子(1)了吗？我怀疑会有这样的事情发生。有什么方法可以用CSS来完成这个任务吗？
目前，如果下一个兄弟不是带有js的.content，而是想知道CSS是否可行，我将隐藏每个.content。
回答 2
Stack Overflow用户
发布于 2016-12-10 06:23:03
没有任何scripting..you需要使用javascript或Jquery，这是不可能的。
Stack Overflow用户
发布于 2016-12-18 20:23:38
我很想建议把每一块
<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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41072750
复制相关文章
相似问题
腾讯云开发者
