表中的第一个子选择器

Question

我创建了一个页面,它是三个独立网站的登录门户.在此页面上,我向所述网站显示了三个登录门户.我试图用css和尽可能少的课程来设计它(我需要微调我的CSS技能).

我创建的是一个包含三行和两列的表,名为loginPortals:

<table class="loginPortals">
    <tbody>
        <tr>
            <td>Picture 1</td>
            <td>Login form 1</td>
        </tr>
        <tr>
            <td>Picture 2</td>
            <td>Login form 2</td>
        </tr>
        <tr>
            <td>Picture 3</td>
            <td>Login form 2</td>
        </tr>
    </tbody>
</table>

我刚刚开始制作桌子的样式,所以它非常不完整,但我已经在努力了.这是简化的,因为我不确切地知道它的外观.基本上,我想在每一行之间出现某种边界.以下并不是我想要的那样:

.loginPortals{
    width:100%;
}
    .loginPortals tbody:first-child td{
        border-top:1px solid #000;
    }
    .loginPortals tbody tr td{
        border-bottom:1px solid #000;
        padding:1em 0;
    }

第一个孩子选择器没有像我想象的那样工作.它将顶部边框应用于所有行中的所有单元格.这导致线条厚度在行的中间加倍.

如何解决此问题,以便顶部边框仅应用于顶行而不创建额外的类或应用任何内联样式.

谢谢!
乔

Answer 1

您的表格边框需要设置为折叠:

.loginPortals{
    width:100%;
    border-collapse: collapse;
}

然后,您可以省略:first-child规则,只为所有行应用顶部和底部边框:

.loginPortals tbody tr td{
    border-top:1px solid #000;
    border-bottom:1px solid #000;
    padding:1em 0;
}

此外,仅为您的信息,这个选择器:

.loginPortals tbody:first-child td

手段:

选择 其父td元素的第一个子元素
中的任何元素tbody
.

并不是:

选择 a的第一个子td元素
中的任何元素tbody.

因此,既然tbody是第一个也是唯一的孩子.loginPortals,td他们所有tr父母的所有元素都将被选中.请参阅此答案以获得直观的解释.你可能想要这个选择器:

.loginPortals tbody tr:first-child td

但这并不是必要的,因为你所要做的就是折叠桌面边框.