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

选择类内或具有特定id的第一个div的正确CSS选择器是什么？对于父/子元素，这似乎要容易得多，但对于简单元素，我还没有发现任何东西

更新：解决方案

我找到的最干净、最兼容的解决方案是.class~.class，它选择前一个类之后的所有后一个类。例如，如果要从其类中的第一个元素中删除上边框，则应：

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

你可以用

---

.class div:first child{your css}

只需使用id-它对于页面应该是唯一的，因此您确切地知道要在类中选择第一个div，我建议使用以下方法：

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

如果要在id内进行选择，请执行以下操作：

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

但是如果你有身份证，你的手机应该只有一个。否则，您将编写无效的HTML。只需对id使用如下简单选择器：

#yourID{
    // Your Properties
}

还要注意的是，在@sourcecode的回答中，他目前没有示例中的>。否则，它将不会选择类中的第一个div，而是选择该类中的每个第一个div。请查看此小提琴，以了解以下示例：

下面是我答案的演示：

---

如果要选择特定类中的第一个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添加一个类，无论您喜欢什么：

您可以使用以下伪类：

：第一个孩子 ：n-child1 或者您可以按ID选择：

元素ID div[id=elementID]

---

两者的区别在于特异性；与使用属性选择器div[id=elementID]相比，使用elementID具有更高的特殊性优先级，但这两种方法都是选择元素的正确方法。

有些答案没有解决有效的情况，即您的网站的不同页面上可能有不同位置的元素，但是，您只希望仅在页面显示为该组中的第一个子页面时才对其进行样式设置

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

.某物部门{ 背景：蓝色； 宽度：10px； 高度：10px； 利润率：20px； } .某物部门：第一个孩子{ 背景：红色； } .第一个孩子{ 背景：黄色； }

---

我不会投反对票，但是这个答案并不正确，它没有选择一个类中的第一个div，它实际上选择了一个类中每个领域的第一个div-检查这个提琴，除非我在一个页面上使用多个id。@oceanic815你知道如果你有两个id是相同的，那就是无效的HTML吗？但是如果你在不同的页面上有不同位置的元素呢页面，但你只想在页面显示为该组中的第一个孩子的地方设置页面样式？你到底为什么要这样做？div[id=elementID]简要解释特殊性。这也是非常有用的，比如说当你想选择所有以某个特定单词开头或结尾的id时，例如：div[id^=elem]以elem开头或div[id$=elem]以elem结尾或div[id*=elem]包含elem。你永远不会知道，其他人可能会发现它很有用：@Connor如果重复的id不好，这可能很有用。jQuery在仅传递ID选择器时\w+使用getElementById，并查找具有该ID的第一个元素。其他任何操作都会强制它使用querySelectorAll并获取具有该ID的所有元素。@JanDvorak启用了CSS，但您的解决方案仅在元素为同级时才起作用。您应该在下面添加解决方案，而不是将其添加到您的问题中。从技术上讲，这并不能回答OPs问题的细节：特定ID。见我的建议答案。