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 ~，但这样可以保持您的风格，甚至在您的“停止”课程之后。还有一个: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中，这将是相当容易的。在现实生活中，我只想为所有想要看到不同风格的元素添加一个类（可能甚至在服务器端脚本中），而不是使用某种范围边界。

两个班级之间的风格

1 个答案: