CSS选择器组合语法

Question

我正在为项目使用jqGrid并检查它使用的样式我找到了这样的选择器：

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

.ui-jqgrid当然是一个班级。

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

所以我的问题：

1. 它们被空间隔开是什么意思？我知道逗号分离.class1, .class2意味着＆＃34;适用于class1和class2＆＃34;，但空间分离是什么意思？
2. 最后td是什么意思？ td.class我理解但是class td？

Answer 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）

Answer 2

1. CSS选择器之间的空间分离意味着后一个选择器是前者的后代。

   （示例：div .main将选择.main元素的子级（任何级别）的任何div个类。）

2. 列出的最后一项（td，此处）是将要设置样式的项目。

Answer 3

这意味着其中包含的样式将应用于td中包含tr的所有ui-row-ltr，其ui-jqgrid类嵌套在您的元素{{1}}类中。< / p>

Answer 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>

Answer 5

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

Answer 6

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

Answer 7

想象一下，我们有一个表id =＆＃34; main＆＃34; ，其中包含许多内部有td的tr。 现在，选择器＆＃34; #main td＆＃34;表示选择标签为td的所有元素，这些元素是子元素或具有id = main的子元素的子元素，而不是必需的子元素，但是下面的任何级别

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

这意味着，选择标签为td的所有元素，其中某个元素高于其级别的父元素tr，类别为ui-row-ltr，他具有类ui-jqgrid的元素

所有这些都是基本的css内容，搜索一些教程以了解更多信息 http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048