为什么这段代码不能帮助我实现一个空白井字游戏板？答案

【问题标题】：Why does this code does not help me achieve a blank Tic-tac-toe board?为什么这段代码不能帮助我实现一个空白井字游戏板？
【发布时间】：2019-03-05 08:19:36
【问题描述】：

这里是codepen，谁能说说为什么不显示边框？我想在不使用类的情况下实现这个https://codepen.io/javisp91/pen/PmzpLz。

我使用了 nth-of-type 并将表格视为矩阵。此代码不显示边框。什么可以压倒一切？

tr td {
    width:100px;
    height: 100px;
}

tr: nth-of-type(1) td: nth-of-type(1) {
    border-right: 5px solid black;
    border-bottom: 5px solid black;
}

tr: nth-of-type(1) td: nth-of-type(2) {
    border-bottom: 5px solid black;
    border-right: 5px solid black;
    border-left: 5px solid black;
}

tr: nth-of-type(1) td: nth-of-type(3) {
    border-left: 5px solid black;
    border-bottom: 5px solid black;
}

tr: nth-of-type(2) td: nth-of-type(1) {
    border-right: 5px solid black;
    border-bottom: 5px solid black;
    border-top: 5px solid black;
}

tr: nth-of-type(2) td: nth-of-type(2) {
    border-bottom: 5px solid black;
    border-right: 5px solid black;
    border-left: 5px solid black;
    border-top: 5px solid black;
}

tr: nth-of-type(2) td: nth-of-type(3) {
    border-left: 5px solid black;
    border-bottom: 5px solid black;
    border-top: 5px solid black;
}

tr: nth-of-type(3) td: nth-of-type(1) {
    border-right: 5px solid black;
    border-top: 5px solid black;
}

tr: nth-of-type(3) td: nth-of-type(2) {
    border-top: 5px solid black;
    border-right: 5px solid black;
    border-left: 5px solid black;
}

tr: nth-of-type(3) td: nth-of-type(3) {
    border-left: 5px solid black;
    border-top: 5px solid black;
}

body {
    text-align: center;
}

table {
    margin: auto;
}

【问题讨论】：

欢迎来到 StackOverflow！寻求调试帮助的问题（“为什么这段代码不起作用？”）必须包括所需的行为、特定的问题或错误以及重现它所需的最短代码在问题本身。没有明确的问题陈述的问题对其他读者没有用处。请参阅：How to create a Minimal, Complete, and Verifiable example。

标签： html css css-selectors

【解决方案1】：

您没有正确定义它们。请参阅以下fork 或 sn-p：

tr td{
	width:100px;
	height: 100px;
}
tr td{
	border-right: 5px solid black;
	border-bottom: 5px solid black;
}
tr td:last-child{
  border-right:0;
}

tr:last-child td{
  border-bottom:0;
}
body{
	text-align: center;
}
table{
	margin: auto;
}

	<h1>Tic Tac Toe</h1>
	<table>
		<tr>
			<td> </td>
			<td> </td>
			<td> </td>
		</tr>
		<tr>
			<td> </td>
			<td> </td>
			<td> </td>
		</tr>
		<tr>
			<td> </td>
			<td> </td>
			<td> </td>
		</tr>
	</table>

逻辑： 设置除最后一个之外的所有tr td 右下边框。

tr td{
    border-right: 5px solid black;
    border-bottom: 5px solid black;
}
tr td:last-child{
  border-right:0;
}

tr:last-child td{
  border-bottom:0;
}

【讨论】：

【解决方案2】：

试试这个代码。

表{ 边距：自动；边框：实心//您在代码中忘记了这一行，将此行显示为边框。 }

【讨论】：