css - 两个类(class)之间的风格

Question

我有这样的 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”的红色背景。这可能吗？

Answer 1

您可以尝试使用 '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
}

http://jsfiddle.net/p0et4yu0/

不过在 javascript 中这会相当容易。在现实生活中，我只是向所有我希望看到不同样式的元素添加一个类(甚至可能在服务器端脚本中)，而不是使用某种范围边界。