我有这样的 HTML 代码
<table .. class="atree" .. />
<table><td>a</td></table>
<table><td>b</td></table>
<table><td>c</td></table>
<table><td>d</td></table>
<table... class="btree" .. />
<table><td>e</td></table>
<table><td>f</td></table>
<table><td>g</td></table>
现在我想为“atree”和“btree”这两个类之间的所有 tds 应用一种样式,例如特定的背景颜色。假设预期结果仅为“a”、“b”、“c”和“d”的红色背景。这可能吗?
最佳答案
您可以尝试使用 'next siblings' selector ~
,但这会让你的风格继续下去,即使在你的“停止”类(class)之后。还有一个 :not()
pseudo class ,但这只允许简单的选择器,所以里面没有 ~
。我看到的唯一解决方案是通过覆盖每个属性来抵消样式:
一个简单的例子:
HTML:
<ul>
<li>Lorem Ipsum</li>
<li class='start'>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li class='stop'>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<ul>
CSS:
.start, .start ~ li {
color: green;
}
// note this has to come second, as the specificity is the same as the rule above
li, .stop ~ li, .stop {
color: red;
// all your styles need to be countered / reset here
}
不过在 javascript 中这会相当容易。在现实生活中,我只是向所有我希望看到不同样式的元素添加一个类(甚至可能在服务器端脚本中),而不是使用某种范围边界。
关于css - 两个类(class)之间的风格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27643101/