CSS选择器：id或类中的第一个div

Question

选择一个类中的第一个div或具有特定id的正确CSS选择器是什么？使用父/子元素似乎更容易，但我没有找到任何简单元素。

更新：解决方案

我找到的最干净，最兼容的解决方案是.class~ .class，它选择跟在前一类后面的所有后一类。例如，如果要从其类中的第一个元素中删除顶部边框，您可以：

<style>
    .dolphin {
        border-top:0;
        }
    .dolphin ~ .dolphin {
        border-top:1px solid #000;
        }
</style>

Answer 1

如果您想选择特定班级中的第一个div，则可以使用：

.class div:first-child

当您获得以下HTML时，这将不起作用：

<div class="class">
    <h1>The title</h1>
    <div>The CSS won't affect this DIV</div>
</div>

它不起作用，因为div不是.class的第一个孩子。如果您不想在这种情况下定位div，我建议添加另一个容器（或者为div添加一个类，无论你喜欢什么:) :)

Answer 2

要选择类中的第一个div，我建议使用此方法

.yourClassName > div:first-child{
   // Your properties
}

如果您想在ID中选择，请执行此操作

#yourUniqueId > div:first-child{
   // Your properties
}

但是如果您有ID，那么仅会有一个ID，否则您将编码 无效 HTML，只需使用简单的选择器像这样的id's

#yourID{
    // Your Properties
}

还要注意，在@ sourcecode的答案中，他目前没有＆gt;在他没有这个的例子中，它不会选择一个类中的第一个div，而是选择该类中的每个第一个div来检查这个小提琴的例子

Demo First Selector from each group

这是我的回答演示

Demo First Selector ONLY

Answer 3

你可以使用

.class div:first-child{ your css }

Answer 4

只需使用ID - 它应该是页面唯一的，因此您确切知道您正在影响的项目

Answer 5

您可以使用以下伪类：

1. ：第一胎
2. ：第n个孩子（1）

或者您可以按ID选择：

1. #elementID
2. DIV [ID = “elementID”]

上述两者之间的区别在于特异性;使用“#elementID”比使用属性选择器“div [id =”elementID“]具有更高的特异性（优先级），但两者都是选择元素的正确方法。

Answer 6

某些答案无法解决您可能在网站的不同页面上的不同位置放置元素的有效情况，但是您只想为页面样式设置为仅在该页面上显示第一个子元素的情况下组。

以下解决方案回答了OP关于选择具有特定ID的第一个元素的问题：

.something div{
    background:blue;
    width:10px;
    height:10px;
    margin:20px;
}

.something div:first-child{
    background:red;
}

.something div#test:first-child{
    background:yellow;
}

<div class="something">
    <div id="test">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>