Question

我对CSS的经验很少。以下语法来自bootstrap 3。

.table > thead > tr > td.danger,
.table > tbody > tr > td.danger,
.table > tfoot > tr > td.danger,
.table > thead > tr > th.danger,
.table > tbody > tr > th.danger,
.table > tfoot > tr > th.danger,
.table > thead > tr.danger > td,
.table > tbody > tr.danger > td,
.table > tfoot > tr.danger > td,
.table > thead > tr.danger > th,
.table > tbody > tr.danger > th,
.table > tfoot > tr.danger > th {
  background-color: #f2dede;
  border-color: #eed3d7;
}

我希望有人可以为我翻译成英文。

Answer 1

以第一行为例

.table > thead > tr > td.danger

.table是一个名为table的类，>表示直接嵌套在其中的任何内容。 thead是一个html元素，tr也是如此，而td.danger是html元素td与类danger的组合。

因此，这一行表示td danger，tr内部thead内部table，内容为{{1} }}

最后的background-color和border-color是应用于指定元素的样式，其中#f2dede和#eed3d7为其值。

总之，整体语法如下：

selector {
   style: value;
}

正如您在示例中所看到的，您可以使用逗号分隔多个选择器，并在花括号内用;分隔多个样式和值。

Answer 2

.table =元素class="table"

> =

的直接孩子

thead = thead元素

td = td元素

带有td.danger

的

td = class="danger"个元素

, =或

.table > thead > tr > td.danger =所有td个class="danger"是tr的直接子级，thead的后代是class="table"的后代。元素,。

逗号（.element1, .element2 { background-color: black; }）表示或。一个简单的例子：

class=".element1"

根据此样式定义，class=".element2"或>的所有元素都将具有黑色背景。

关于<div class="top-div"> <div class="sub-div"> <img src="foo.png"> </div> <img src="bar.png"> </div>的说明。如果您有以下HTML：

.top-div > img {
    // Styles here
}

并使用此CSS：

src="bar.png"

只会为>设置图片。

但是，如果您使用此CSS（无.top-div img { // Styles here }）：

<img>

两个{{1}}代码都将设置样式。

Answer 3

它与说这个基本相同：

不是真的，但非常接近......除了>意味着它直接嵌套在里面。

.table thead tr td.danger {
  background-color: #f2dede;
  border-color: #eed3d7;
}
.table tbody tr td.danger {
  background-color: #f2dede;
  border-color: #eed3d7;
}
.table tfoot tr td.danger {
  background-color: #f2dede;
  border-color: #eed3d7;
}
.table thead tr th.danger {
  background-color: #f2dede;
  border-color: #eed3d7;
}
.table body tr th.danger {
  background-color: #f2dede;
  border-color: #eed3d7;
}
.table tfoot tr td.danger {
  background-color: #f2dede;
  border-color: #eed3d7;
}
.table thead tr.danger td {
  background-color: #f2dede;
  border-color: #eed3d7;
}
.table tbody tr.danger td {
  background-color: #f2dede;
  border-color: #eed3d7;
}
.table tbody tr.danger td {
  background-color: #f2dede;
  border-color: #eed3d7;
}
.table thead tr.danger th {
  background-color: #f2dede;
  border-color: #eed3d7;
}
.table tbody tr.danger th {
  background-color: #f2dede;
  border-color: #eed3d7;
}
.table tbody tr.danger th {
  background-color: #f2dede;
  border-color: #eed3d7;
}

CSS语法 - 如何解释这个？

3 个答案: