CSS：Cascade只有一个级别

Question

说我有一个＆lt; table＆gt;定义了一个css类（＆lt; table class =“x”＆gt;）并且我想改变＆lt; td＆gt;的第一级的'color'属性，这是否可以使用css而不在相关的＆lt上设置类; TD＆GT;

即

<table class="x">
    <tr>
        <td>
            xxxx
            <table><tr><td>yyy</td><tr></table>
        </td>
    </tr>
<table>

我只希望xxxx改变颜色 - 所以当我只想要xxxx目标时，.x td{color:red;}当前将适用于xxxx和yyyy，但宁愿不给xxxx td一个类名

Answer 1

试试这个：

table.x > tr > td { ... }

>是直接子选择器。

Answer 2

一个选项是通过将第二级设置为您想要的值来覆盖级联效果，允许您取消顶级效果。

这样的事情：

table.x tr td { ...}

table.x tr td table tr td { ... }

第一个语句将应用于.x表下的所有td，但第二个语句将覆盖内部嵌套级别（以及它们下面的任何内容）。由于它出现在第一个语句之后，它将覆盖上面语句中设置的任何内容。

这也可以在IE中使用，因为它使用了更为基本的祖先/后代构造而不是子代，而这些构造并不受支持。