我正在尝试用css3设计一个棋盘,但看起来我的选择器是错误的.这是我的JsFiddle
那么为什么我不能在线条和单元格周围看到设计的测试蓝色和红色边框？
HTML
<body>
My chess board
<table class="chess_board">
<tr class="chess_line">
<td class="chess_cell black_cell white_piece"><span>♔</span></td>
<td class="chess_cell white_cell white_piece"><span>♕</span></td>
<td class="chess_cell black_cell white_piece"><span>♖</span></td>
<td class="chess_cell white_cell white_piece"><span>♗</span> </td>
</tr>
<tr class="chess_line">
<td class="chess_cell white_cell"><span>♜</span></td>
<td class="chess_cell black_cell"><span>♝</span></td>
<td class="chess_cell white_cell"><span>♞</span></td>
<td class="chess_cell black_cell"><span>♟</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);
}
有人可以帮忙吗？
这是因为浏览器自动将<tbody>元件之间table以及tr在创建从HTML DOM中.
在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/