CSS:Cascade只有一个级别

Question

假设我有一个定义了css类的<table>(<table class ="x">)并且我想更改<td>的第一级''color'属性,这是否可以使用css而不设置类关于相关的<td>？

即

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

我只希望xxxx改变颜色 - 所以.x td{color:red;}当我只想要xxxx目标时,它将适用于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,因为它使用了祖先/后代的基本结构,而不是儿童,这些都没有得到很好的支持.

第二个规则覆盖了第一个规则,因为它排在第二位,但因为它更具体.检查CSS规范以获取有关特异性和级联的更多信息.此外,这些选择器可以分别简化为`table.x td {...}`和`table.x table td {...}`. (2认同)