关于CSS选择器的问题

Question

如果我有一个选择器，例如

#myTable tr td .someClass{....}

此 someClass 是否“仅”引用具有该类的 td 或者它是否引用具有“someClass”的 td 的任何子级？那么它与 ; 一样吗？

#myTable tr td.someClass{....}

基本上我的问题是 td 后面的空格有什么区别吗？

Answer 1

#myTable tr td .someClass{....} 指的是 任何元素，其内部具有 someClass 类 strong> 一个 td 标记，位于 tr 标记内，该标记位于 id 为 myTable 的元素内。

#myTable tr td.someClass{....} 引用带有someClass类的td标签，位于 tr 标记内，该标记位于 id 为 myTable 的元素内。

Answer 2

是的，空间会有所不同：

td.someClass {...} //Refers to a table cell with the class someClass
td .someClass {...} //Refers to an element with the class someClass that is a descendant of a table cell

Answer 3

前一个选择器引用 someClass 类的元素，它是 td 的后代。

要引用类名 someClass 的 td 元素，请使用后一个选择器。

空格是一个后代选择器；如果您想要一个直接子元素（td 和 .someClass 元素之间没有元素），请使用 >：

#myTable tr td > .someClass{....}

Answer 4

孩子和父母之间有一个空间。如果没有空格，您将告诉 CSS 查找具有该类的元素。

Answer 5

是：

• 第一个案例的目标是 td 的子元素，具有“someclass”类，
• 第二个案例的目标是具有“someclass”类的 td

Answer 6

空间确实有所作为。第一个选择器选择类 someClass 的任何元素，该元素是 myTable 中 tr 中 td 的子元素。

第二个选择任何具有 someClass 类的 td，该类是 myTable 中 tr 的子级

Answer 7

td 后面的空格确实有所不同

css:

#myTable tr td.someClass{ color:brown; }
#myTable tr td .someClass{ color:red; }

html:

<table id="myTable">
<tr>
    <td class="someClass">
        cofee
        <span class="someClass">
            wine
        </span>
    </td>
</tr>

咖啡会呈现棕色，而酒红色。