单边td带边框CSS

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

＆＃13;

＆＃13;

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;
    }    

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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。您可以运行下面的代码段，看看它是如何运作的。

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>

希望这有帮助！