gpt4 book ai didi

html - 应用 tbody td :nth-of-type(3){ border-bottom-color: transparent; } and tr. noborder td { border-bottom: transparent; 时的区别} 在 CSS 中

转载 作者:太空宇宙 更新时间:2023-11-04 07:10:54 27 4
gpt4 key购买 nike

第一个场景:

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 属性而不添加任何类和 id 吗?

我是 HTML 和 CSS 的新手。非常感谢您提前的关心。

最佳答案

因为您将边框应用到 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>

关于html - 应用 tbody td :nth-of-type(3){ border-bottom-color: transparent; } and tr. noborder td { border-bottom: transparent; 时的区别} 在 CSS 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51200207/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com