带边框 CSS 的单个 td

Question

table {
        border-collapse: collapse;
        margin:100px auto;
    }
    
 td {
        margin: 0px;
        padding: 5px;
        text-align: left;
        border:1px solid #080808;
    }
    
.border {
        border: 1px solid #080808;
    }

    
.noborders td {
        border:0;
    }

      
.border_single {

        border: 1px solid #080808;
    }
    

<table>
    <tbody class="border">
        <tr>
            <td>Table Cell with borders</td>
            <td>Table Cell with borders</td>
            <td>Table Cell with borders</td>
        </tr>
        <tr class="noborders">
            <td>Table Cell without borders</td>
            <td>Table Cell without borders</td>
            <td>Table Cell without borders</td>
        </tr>
        <tr class="noborders">
            <td>Table Cell without borders</td>
            <td class="border_single">Table WITH border</td>
            <td>Table Cell without borders</td>
        </tr>
    </tbody>
</table>

我试图了解 CSS 如何跨表层次结构传递值。我故意将 td 归类为“border_single”，以便专门引用它并应用基本边框。我无法显示边框，我假设它从高层继承样式，这就是为什么特定 td 的边框没有显示？

Answer 1

你的工作是正确的，你只需要在你的类中添加 td

.border_single 
{
   border: 1px solid #080808;
}

到这里

td.border_single 
{
   border: 1px solid #080808;
}

即使您有td.no_borders、td.with_background 等，td.border_single 仍将按指定工作，您也可以使用 id #border_single 或 td#border_single 更具体。

您也可以使用 td:nth-child(n), td:first-child, td:last-child 并具有相同的输出，而无需使用 id 或 class

table {
        border-collapse: collapse;
        margin:100px auto;
    }
    
 td {
        margin: 0px;
        padding: 5px;
        text-align: left;
        border:1px solid #080808;
    }
    
.border {
        border: 1px solid #080808;
    }

    
.noborders td {
        border:0;
    }

      
td.border_single {

        border: 1px solid #080808;
    }
    
tr:nth-child(5) > td:nth-child(2)
    {
    border: 1px solid #080808;
    }
tr:last-child > td:nth-child(2)
    {
    border: 1px solid #080808;
    }    

<table>
    <tbody class="border">
        <tr>
            <td>Table Cell with borders</td>
            <td>Table Cell with borders</td>
            <td>Table Cell with borders</td>
        </tr>
        <tr class="noborders">
            <td>Table Cell without borders</td>
            <td>Table Cell without borders</td>
            <td>Table Cell without borders</td>
        </tr>
        <tr class="noborders">
            <td>Table Cell without borders</td>
            <td class="border_single">Table WITH border</td>
            <td>Table Cell without borders</td>
        </tr>
        <tr class="noborders">
            <td>Table Cell without borders</td>
            <td>Table Cell without borders</td>
            <td>Table Cell without borders</td>
        </tr>
        <tr class="noborders">
            <td>Table Cell without borders</td>
            <td>With border using tr:nth-child(n) > td:nth-child(n)</td>
            <td>Table Cell without borders</td>
        </tr>
        <tr class="noborders">
            <td>Table Cell without borders</td>
            <td>Table Cell without borders</td>
            <td>Table Cell without borders</td>
        </tr>
        <tr class="noborders">
            <td>Table Cell without borders</td>
            <td>With border using tr:last-child > td:nth-child(n)</td>
            <td>Table Cell without borders</td>
        </tr>
    </tbody>
</table>

Answer 2

问题

CSS 声明中的特殊性很重要。

选择者获胜的顺序为：

1. 重要性（使用!important）
2. 特异性
3. 来源订单

阅读更多here.

.no_borders td 比 .border_single 更具体，所以在：

    <tr class="noborders">
        <td>Table Cell without borders</td>
        <td class="border_single">Table WITH border</td>
        <td>Table Cell without borders</td>
    </tr>

<td class="border_single">Table WITH border</td> 将从.no_borders td 中选择样式，而不是.border_single。

---

解决方案

一种可能的解决方案是使用id 而不是class 选择器，因为id 比class 更具体。

在这种情况下，请在 HTML 文件中使用 <td id="border_single">，并在 CSS 文件中将 .border_single 更改为 #border_single。你可以运行下面的 sn-p 看看它是如何工作的。

table {
        border-collapse: collapse;
        margin:100px auto;
    }
    
 td {
        margin: 0px;
        padding: 5px;
        text-align: left;
        border:1px solid #080808;
    }

.border {
        border: 1px solid #080808;
    }

.noborders td {
        border:0;
    }
      
#border_single {
        border: 1px solid #080808;
    }

<table>
    <tbody class="border">
        <tr>
            <td>Table Cell with borders</td>
            <td>Table Cell with borders</td>
            <td>Table Cell with borders</td>
        </tr>
        <tr class="noborders">
            <td>Table Cell without borders</td>
            <td>Table Cell without borders</td>
            <td>Table Cell without borders</td>
        </tr>
        <tr class="noborders">
            <td>Table Cell without borders</td>
            <td id="border_single">Table WITH border</td>
            <td>Table Cell without borders</td>
        </tr>
    </tbody>
</table>

希望这会有所帮助！