将CSS应用于第一个表格。

Question

请看这个例子：https://jsfiddle.net/kevalbhatt18/w361a9hg/ 当你看到 jsfiddle 的第一个窗口时，否则你想要看到我想要的内容。

我的问题是，我创建了一个表格并应用了 CSS，一切都正常工作，但现在我只想将 border-left: 1px dotted; 应用于 第一个表格。

<div class='openDiv hide'>
    <table id="addPropertyValue1"></table>
    <table id="addPropertyValue2"></table>
    <table id="addPropertyValue3"></table>
    <table id="addPropertyValue4"></table>
    <table id="addPropertyValue5"></table>
</div>

我尝试使用first-child，但不起作用。

.openDiv :first-child{
        border-left: 1px dotted;
    }

注意：不要直接在id上应用css样式。

空标签。

.openDiv #addPropertyValue1{
    border-left: 1px dotted;
}

我希望得到一个纯CSS的解决方案，可以帮助我在表格上应用动态类，而不需要使用jQuery或JavaScript。

- Keval Bhatt

---

.openDiv table:first-child - Mr_Green

当您不想使用jQuery时，请从问题中删除jQuery标签。 - Hari Ram

Answer 1

在 .openDiv 中，使用 first-child 来选择表格。

就像这样:

.openDiv table:first-child {
    border-left:1px dotted;
}

这里是更新后的示例代码。

- codingrose

---

我有一个问题，你能告诉我first-of-type和.openDiv table:first-child之间的区别，哪个是最佳实践？ - Keval Bhatt

first-of-type 表示其父元素的子元素列表中相同类型的第一个兄弟元素，而 first-child 则表示其父元素的第一个子元素。 - Alex Char

@AlexChar 谢谢，现在我明白了。 - Keval Bhatt

@AlexChar，我认为在第一个类型的答案中使用first-of-type是完美的。下面还有一个使用first-child类型解决方案的答案，所以如果其他用户来了，他们就会理解两种解决方案的区别。如果两个答案都相同，那么它就没有什么用处了。 - Keval Bhatt

为了更好的理解，请查看 :first-child 和 :first-of-type。 - Alex Char

Answer 2

应用CSS到第一个子元素

.openDiv table:first-child{
    border-left: 1px dotted #000;
}

- Prachi Gharde

Answer 3

.openDiv table:nth-child(1){
    border-left: 1px dotted #000;
}

为了继续并继续进行其余的表格。

.openDiv table:nth-child(2){
    border-left: 1px dotted #000;
}
.openDiv table:nth-child(3){
    border-left: 1px dotted #000;
}
.openDiv table:nth-child(4){
    border-left: 1px dotted #000;
}

等等..

- Silvester