Question

如果我有一个像

这样的选择器

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

这个someClass是否只引用了具有该类的td或者是否引用了具有“someClass”的td的任何子代？所以它是否相同;

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

基本上我的问题是td之后的空间有什么不同吗？

Answer 1

#myTable tr td .someClass{....}指的是任何元素，其中someClass 类位于一个td标记内，位于tr标记，位于ID为myTable的元素内。

#myTable tr td.someClass{....}指的是td标记类someClass，位于tr标记内，位于元素内ID为myTable。

Answer 2

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

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

空间是一个后代选择器;如果你想要一个直接的孩子（someClass和td元素之间没有元素）使用.someClass：

Answer 3

是的，空间有所不同：

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 4

将父母与父母分开的空间。如果没有这个空间，你会告诉CSS找到一个带有该类的元素。

Answer 5

是：

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

Answer 6

空间确实有所作为。第一个选择器在someClass的{{1}}中选择td类tr的子元素。

第二个选择myTable td someClass tr的所有myTable {{1}}

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>

cofee会出现棕色，酒红色。

关于CSS选择器的问题

7 个答案: