在CSS中应用tbody td:nth-of-type(3){ border-bottom-color:透明；}和tr.noborder td{ border-bottom: transparent；}的区别
在CSS中应用tbody td:nth-of-type(3){ border-bottom-color:透明；}和tr.noborder td{ border-bottom: transparent；}的区别
提问于 2018-07-06 05:36:36
第一个场景：
h1{
text-align: center;
}
td{
width: 100px;
height: 100px;
border-right: 1px solid gray;
border-bottom: 1px solid gray;
}
table{
margin: 0px auto 0px auto;
}
tbody td:nth-of-type(3){
border-right-color: transparent;
}
tbody tr:nth-of-type(3){
border-bottom-color: transparent;
}<!DOCTYPE html>
<html>
<head>
<title>Table</title>
<link rel="stylesheet" type="text/css" href="../CSS/tic.css">
</head>
<body>
<h1>Tic Tac Toe</h1>
<table>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
第二个场景：
h1{
text-align: center;
}
td{
width: 100px;
height: 100px;
border-right: 1px solid gray;
border-bottom: 1px solid gray;
}
table{
margin: 0px auto 0px auto;
}
tbody td:nth-of-type(3){
border-right-color: transparent;
}
tr.noborder td{
border-bottom: transparent;
}<!DOCTYPE html>
<html>
<head>
<title>Table</title>
<link rel="stylesheet" type="text/css" href="../CSS/tic.css">
</head>
<body>
<h1>Tic Tac Toe</h1>
<table>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="noborder">
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
对于第一个场景，我没有得到正确的输出。我不确定为什么尽管tbody td:nth-of-type(3) { border-bottom-color: transparent; }属性的特异性比td更强，但它没有得到应用。
对于第二个场景，我在HTML中添加了一个类，结果是正确的，而对于第一个场景，结果是不正确的。
您可以帮助我在第一个场景中更改CSS属性，而不添加任何class和id吗？
我是HTML和CSS的新手。非常感谢您在此之前的关心。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-07-06 05:50:22
因为您要将边框应用到td而不是tr，所以可以使用tbody tr:nth-of-type(3) td来获得您想要的透明边框，请参见下面的内容
h1{
text-align: center;
}
td{
width: 100px;
height: 100px;
border-right: 1px solid gray;
border-bottom: 1px solid gray;
}
table{
margin: 0px auto 0px auto;
}
tbody td:nth-of-type(3){
border-right-color: transparent;
}
tbody tr:nth-of-type(3) td{
border-bottom-color: transparent;
}<!DOCTYPE html>
<html>
<head>
<title>Table</title>
<link rel="stylesheet" type="text/css" href="../CSS/tic.css">
</head>
<body>
<h1>Tic Tac Toe</h1>
<table>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51200207
复制相关文章
相似问题