错误的 css ">" 选择器（由我）

Question

我正在尝试用 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);
}

有人能帮忙吗？

Answer 1

这是因为在从 HTML.

创建 DOM 时，浏览器会自动将 <tbody> 元素放在 table 和 tr 之间

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

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

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

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

或添加 tbody > 如：

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

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

Answer 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);
}

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

Answer 4

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

只需在您的情况下使用简单的继承选择器。

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

Answer 5

使用这个：

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

而不是：

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

错误的 css ">" 选择器（由我）

Wrong css ">" selectors (by me)

css

css-selectors