错误的css“>”选择器（由我）[重复]答案

【问题标题】：Wrong css ">" selectors (by me) [duplicate]错误的css“>”选择器（由我）[重复]
【发布时间】：2015-09-02 11:50:21
【问题描述】：

我正在尝试使用 css3 设计一个棋盘，但似乎我的选择器是错误的。 Here is my JsFiddle

那么为什么我看不到线条和单元格周围设计的测试蓝色和红色边框？

html

<body>
    My chess board
    <table class="chess_board">
       <tr class="chess_line">
          <td class="chess_cell black_cell white_piece"><span>&#9812;</span></td>
          <td class="chess_cell white_cell white_piece"><span>&#9813;</span></td>
          <td class="chess_cell black_cell white_piece"><span>&#9814;</span></td>
          <td class="chess_cell white_cell white_piece"><span>&#9815;</span> </td>
       </tr>
       <tr class="chess_line">
          <td class="chess_cell white_cell"><span>&#9820;</span></td>
          <td class="chess_cell black_cell"><span>&#9821;</span></td>
          <td class="chess_cell white_cell"><span>&#9822;</span></td>
          <td class="chess_cell black_cell"><span>&#9823;</span></td>
      </tr>
    </table>
    My another chess board ... to be drawn !
</body>

css

table.chess_board > tr.chess_line {
  background-color: blue;
}

table.chess_board > tr.chess_line > td.chess_cell {
  border: 2px solid red;
 /*
  font-family: serif;
  font-size: 2.3em;
  width: 1.0em;
  height: 1.0em;
  text-align: center;
  */
}

table.chess_board > tr.chess_line > td.chess_cell > span {
  position: relative;
  bottom: 0.1em;
}

table.chess_board > tr.chess_line > td.white_cell {
  background-color: rgb(217, 245, 2);
}

table.chess_board > tr.chess_line > td.black_cell {
  background-color: rgb(89, 34, 21);
}

table.chess_board > tr.chess_line > td.white_piece {
  color: rgb(179, 48, 63);
}

谁能帮忙？

【问题讨论】：

旁注：> 表示direct descendant of what precedes the >
是的，我真正的意思是，只是不知道 tbody 标签

标签： css css-selectors

【解决方案1】：

这是因为在从 HTML 创建 DOM 时，浏览器会自动将 <tbody> 元素放在 table 和 tr 之间。

在 Firebug（或类似工具）中检查 DOM 结构

您可以删除 > 运算符，例如：

table.chess_board tr.chess_line {
  background-color: blue;
}

http://jsfiddle.net/nxvse1hd/8/

或添加tbody >like：

table.chess_board > tbody > tr.chess_line {
  background-color: blue;
}

http://jsfiddle.net/nxvse1hd/9/

【讨论】：

怎么样！我的限制和准确太多了！好的，要删除这个“>”选择器，据我说似乎比添加 tbody 更好（以后的 html 中会是什么？）
是的，我认为这也是更好的方法，除非你有嵌套表格。
我有一个新版本：jsfiddle.net/loloof64/nxvse1hd/11 但是这一次，也许是最后一个问题，我想消除单元格之间的间隙：我试过 margin:0, margin:-0.2em在 chess_cell 内，但似乎不起作用。解决方法？问候
好的。在这里找到解决方案：stackoverflow.com/questions/2279396/…

【解决方案2】：

你需要删除你的css的>，浏览器在你的源代码中添加<tbody>和<thead>元素。

table.chess_board > tr.chess_line {
  background-color: blue;
}

table.chess_board tr.chess_line td.chess_cell {
  border: 2px solid red;
 /*
  font-family: serif;
  font-size: 2.3em;
  width: 1.0em;
  height: 1.0em;
  text-align: center;
  */
}

table.chess_board tr.chess_line td.chess_cell > span {
  position: relative;
  bottom: 0.1em;
}

table.chess_board tr.chess_line td.white_cell {
  background-color: rgb(217, 245, 2);
}

table.chess_board tr.chess_line td.black_cell {
  background-color: rgb(89, 34, 21);
}

table.chess_board tr.chess_line td.white_piece {
  color: rgb(179, 48, 63);
}

【讨论】：

浏览器从不创建隐式的thead元素——它们只对tbody这样做。

【解决方案3】：

dragoste 是对的，你的 css 应该是这样的：

table.chess_board  tr.chess_line {
  background-color: blue;
 }

table.chess_board  tr.chess_line  td.chess_cell {
  border: 2px solid red;

【讨论】：

【解决方案4】：

一些浏览器在 DOM 中添加了<tbody>。当<tbody> 存在时，选择器“>”将不再起作用：

在你的情况下使用简单的继承选择器。

更新的解决方案： http://jsfiddle.net/nxvse1hd/7/

【讨论】：

【解决方案5】：

使用这个：

table.chess_board  tr.chess_line {
  background-color: blue;
 }

代替：

table.chess_board > tr.chess_line {
  background-color: blue;
}

【讨论】：