CSS 选择器组合语法答案

【问题标题】：CSS selector combination syntaxCSS 选择器组合语法
【发布时间】：2014-06-11 22:38:32
【问题描述】：

我正在将 jqGrid 用于一个项目并检查它使用的样式，我发现选择器如下：

.ui-jqgrid tr.ui-row-ltr td { 
... 
}

.ui-jqgrid当然是一个类。

td.ui-row-ltr 是类ui-row-ltr 的选择器，应用于表格行元素。

所以我的问题：

【问题讨论】：

...这是基本的 CSS... 它的意思是“<td> 是 <tr class="ui-row-ltr"> 的后代，<___ class="ui-jqgrid"> 的后代”
啊哈，那么它是一系列子选择器？
@FredrikLindqvist 不是一系列子选择器，而是一系列后代选择器。
@FredrikLindqvist 例如，如果您将空格替换为“大于”符号 (>)，您将获得一系列 直接子选择器。比如.ui-jqgrid > tr.ui-row-ltr > td比.ui-jqgrid tr.ui-row-ltr td更严格。

【解决方案1】：

这确实是基本的 CSS。以下是一些示例：

div.bob 选择<div class="bob">
div .bob 选择嵌套在任何 div 中的任何 class="bob" 元素：
- Ex1：<div><a class="bob"></div>
- Ex2：<div><span><a class="bob"></span></div>
奖励：div > .bob 仅选择直系后代（Ex1，但不是上面的 Ex2）

【讨论】：

【解决方案2】：

CSS 选择器之间的空格分隔意味着后者选择器是前者的后代。

（例如：div .main 将选择作为div 元素的子（任何级别）的任何.main 类。）
列出的最后一项（此处为td）是要设置样式的项。

【讨论】：

【解决方案3】：

这意味着其中包含的样式将应用于 tr 中包含的所有 tds 类 ui-row-ltr 嵌套在 ui-jqgrid 类的元素中。

【讨论】：

【解决方案4】：

是这样的。

<div class="ui-jqgrid">
    <table>
        <tr class="ui-row-ltr">
            <td>some data</td>
        </tr>
    </table>
</div>

或者可能是

<table class="ui-jqgrid">
    <tr class="ui-row-ltr">
        <td>some data</td>
    </tr>
</table>

【讨论】：

【解决方案5】：

您的选择器基本上将定位每个具有tr.ui-row-ltr 的.ui-jqgrid，如果通过，它将将您的css 属性应用于内部的每个td

【讨论】：

【解决方案6】：

空格被称为后代组合this，意思是选择该元素内的所有元素。

【讨论】：

【解决方案7】：

假设我们有一个表 id="main" ，其中包含许多 tr's 里面有 td's。现在，选择器“#main td”意味着选择所有带有标签 td 的元素，它们是具有 id=main 的元素的子元素或子元素的子元素，不一定是子元素，而是低于任何级别的元素

所以如果我有 .ui-jqgrid tr.ui-row-ltr td

这意味着，选择所有带有标签 td 的元素，在他们的级别之上有一个父元素 tr 类为 ui-row-ltr，他在一个元素之上类为 ui-jqgrid

【讨论】：