表格中的第一个孩子选择器

我已经创建了一个页面，它是三个独立网站的登录门户。在这个页面上，我已经显示了三个登录门户网站。我试图用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; 
    }

第一子选择不工作，因为我原以为它会。它将顶部边框应用于所有行中的所有单元格。这会导致行中间的线条粗细加倍。

我该如何解决这个问题，以便顶部边框只应用于顶部行而无需创建额外的类或应用任何内联样式。

谢谢！
乔

来源

2012-04-24 joe92

对我来说很好http://jsfiddle.net/6h8cD/。你能告诉我们网页在哪里搞乱了吗？ – squarephoenix 2012-04-24 16:13:39

你试图达到什么样的视觉效果？你在桌子上使用'border-collapse：collapse'吗？ – Phrogz 2012-04-24 16:16:38

表格的边框需要设置崩溃：

.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

方式：

内tbody
是其父的第一个孩子选择任何td元素
。

而不是：

选择tbody的第一个孩子中的任何td元素
。

如此以来，tbody是.loginPortals第一和唯一的孩子，都在他们的所有tr父母td元素将被选中。有关视觉解释，请参阅this answer。你可能想要这个选择器：

.loginPortals tbody tr:first-child td

但这不是必须的，因为你所要做的就是折叠你的表格边界。

来源

2012-04-24 16:16:21 BoltClock

谢谢。这正如我所希望的那样工作。我会接受你的答案作为答案，但我必须等待4分钟。我稍后再接受。我不知道这些选择器！哈。再次感谢。 – joe92 2012-04-24 16:22:42

我相信这会工作...

td {border-top:1px solid #000;}

来源

2012-04-24 16:14:34 skipZero

如果我理解正确，你有3种形式，只需要两行 - 这就是我从I want a border of some sort appearing between each row如果是这样的话，试试这个。

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

所有的

http://jsfiddle.net/u4v3Z/

来源

2012-04-24 16:18:10 Dutchie432

有趣的是，它不是，我想要删除单元格之间的双重厚度，但看着你的小提琴，看起来像我想我可以使它像这样哈哈。谢谢。 – joe92 2012-04-24 16:26:03

首先，如果你想提高你的CSS技巧，你应立即停止使用表格布局。

其次，:first-child伪类影响父母的第一个孩子的元素。因此，由于您只有一个tbody元素，并且它是table的第一个孩子写作tbody或tbody:first-child将产生相同的结果。

编辑：我想你在这里后可能是tr:first-child td（你只希望第一个表格行中的表格单元格有一个顶部边框）。

解决你的问题，你可以只用border-bottom去所有td S，除非你在上面需要一个边界，以及在这种情况下，您可以为实际table这条边界或你可以给所有的td sa border-top和border-bottom。这当然会呈现如您所描述的双边框，但您可以使用border-collapse: collapse使表格的边框折叠。

总之：table {border-collapse: collapse}。但不要使用表格进行布局。

来源

2012-04-24 16:19:54 powerbuoy

表格中的第一个孩子选择器

回答

相关问题