错误的css“&燃气轮机&引用；选择器（由我提供）_Css_Css Selectors

错误的css“&燃气轮机&引用；选择器（由我提供）

css

错误的css“&燃气轮机&引用；选择器（由我提供）,css,css-selectors,Css,Css Selectors,我正试图用css3设计一个棋盘，但似乎我的选择器错了那么为什么我看不到设计好的测试线和单元格周围的蓝色和红色边框呢 html <body> My chess board <table class="chess_board"> <tr class="chess_line"> <td class="chess_cell black_cell white_piece"><span>&

我正试图用css3设计一个棋盘，但似乎我的选择器错了

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

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>

有人能帮忙吗？

这是因为在从HTML创建DOM时，浏览器会自动将

元素放在表
和tr
之间
检查Firebug（或类似工具）中的DOM结构
您可以删除
操作符，如：
table.chess_board tr.chess_line {
  background-color: blue;
}


或者添加t正文>
如下：
table.chess_board > tbody > tr.chess_line {
  background-color: blue;
}

您需要删除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);
}

dragoste是对的，您的css应该是：
table.chess_board  tr.chess_line {
  background-color: blue;
 }

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

一些浏览器在DOM中添加
。当有
时，选择器“>”将不再工作：
只需在您的案例中使用简单继承选择器
更新的解决方案：
使用以下方法：
table.chess_board  tr.chess_line {
  background-color: blue;
 }

而不是：
table.chess_board > tr.chess_line {
  background-color: blue;
}

旁注：
意味着>

之前的东西的直接后代是的，我真正的意思是，只是不知道tbody标签！我太严格了，太准确了！好的，我要删除这个“>”选择器，似乎比我所说的添加tbody更好（在以后的html中会是什么？）是的，我认为这也是更好的方法，除非你有嵌套的表格。我有一个新版本：但这一次，也许是最后一个问题，我想删除单元格之间的间隙：我尝试了边距：0，边距：-0.2em在chess_单元格内，但似乎不起作用。解决这个问题的方法？雷加索克。在这里找到了解决方案：浏览器从不创建隐式thead元素——它们只使用tbody创建。

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