如何使用 jQuery 或 CSS 检查多个元素 class

Question

如何更改元素 tc4 的数量？ 当前两个元素有一个隐藏的class。

这是我的代码：

 <style>:before{ display:block; margin-top:10px; font: inherit; }.tc-hidden{ display:none; }.tc1 h3.tm-section-label:before { content: "1"; }.tc2 h3.tm-section-label:before { content: "2"; }.tc3 h3.tm-section-label:before { content: "3"; }.tc4 h3.tm-section-label:before { content: "4"; }.tc2.tc-hidden ~.tc3 h3.tm-section-label:before { content: "2"; font: inherit; }.tc3.tc-hidden ~.tc4 h3.tm-section-label:before { content: "3"; font: inherit; }.tc2.tc-hidden.tc3.tc-hidden ~.tc4 h3.tm-section-label:before { content: "2"; font: inherit; } </style>

 <div class="tc-cell tc1"> <h3 class="tm-section-label"></h3> </div> <div class="tc-cell tc2 tc-hidden"> <h3 class="tm-section-label"></h3> </div> <div class="tc-cell tc3 tc-hidden"> <h3 class="tm-section-label"></h3> </div> <div class="tc-cell tc4"> <h3 class="tm-section-label"></h3> </div>

TC4 元素必须显示数字 2。但现在它显示数字 3。

这段代码是用 ZC7A62​​8CBA22E28EB17B5F5C6AE2A266AZ 还是 jQuery 完成的都没有关系。

Answer 1

您的选择器都搞砸了，有些根本没有针对任何元素。 使用您的代码，您可以通过添加一个逗号来实现您想要的。

.tc2.tc-hidden, .tc3.tc-hidden ~ .tc4 h3.tm-section-label:before {
content: "2";
font: inherit;
}

不过，您可能想阅读更多关于 ZC7A62​​8CBA22E28EB17B5F5C6AE2A266AZ 规则的信息，并保持简单