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

CSS selector: first div within an id or class

提问by oceanic815

What is the proper CSS selector to select the first div within a class or with a specific id? This seems to be much easier with parent/child elements but I haven't found anything for simple elements.

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

Update: solution

更新：解决方案

The cleanest, most compatible solution I found was .class ~ .class which selects all the latter classes that follow the former class. For example, if you wanted to remove the top border from the first element within its class you would:

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

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

回答by user2019515

If you want to select the first divwithin a specific class then you can use:

如果要选择div特定类中的第一个，则可以使用：

.class div:first-child

This however won't work when you've got the following HTML:

但是，当您拥有以下 HTML 时，这将不起作用：

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

It won't work because the divisn't the first child of the .class. If you wan't to target that divin this case I'd suggest adding another container (or adding a class to that divwhatever you like :) )

它不会工作，因为div不是.class. 如果你div不想在这种情况下针对它，我建议添加另一个容器（或添加一个div你喜欢的类:)）

回答by iConnor

To select the first div in a class i would recommend using this method

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

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

same if you want to select within a id just do this

同样，如果您想在 id 中选择，请执行此操作

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

but if you do have a id your should ONLYhave one anyway otherwise you would be coding InvalidHTML, just use a simple selector like this for id's

但是如果你有一个 id 你应该只有一个，否则你会编码无效的HTML，只需使用一个像这样的简单选择器作为 id 的

#yourID{
    // Your Properties
}

also note, that in @sourcecode's answer this he doesn't currently have the > in his example without this it will not select the first div within a class but will rather select every first div within that class check this fiddle out for a example of that

还请注意，在@sourcecode 的回答中，他目前在他的示例中没有 > 没有这个，它不会选择类中的第一个 div，而是选择该类中的每个第一个 div 检查这个小提琴的例子那

Demo First Selector from each group

每个组的演示第一选择器

and here is a demo of my answer

这是我的答案的演示

Demo First Selector ONLY

仅限演示首选选择器

回答by sourcecode

you can use

您可以使用

.class div:first-child{ your css }

.class div:first-child{ your css }

回答by Ed Heal

Just use the id - It should be unique to the page and therefore you know exactly what item you are effecting

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

回答by designcise

You can use the following pseudo classes:

您可以使用以下伪类：

1. :first-child
2. :nth-child(1)

1. ：第一个孩子
2. :nth-child(1)

Or you can select by ID:

或者您可以通过 ID 选择：

1. #elementID
2. div[id="elementID"]

1. #元素ID
2. div[id=“元素ID”]

The difference between the above two is in specificity; using "#elementID" would have a higher specificity (precedence) than using the attribute selector "div[id="elementID"] but both are correct ways of selecting the element.

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

回答by Mike Kormendy

Some of the answers don't address the valid scenario where you may have the element in different locations on different pages of your website, but you ONLY want to style for the pages only where it shows up as the first child in that group.

一些答案没有解决您可能在网站不同页面上的不同位置拥有元素的有效场景，但您只想为页面设置样式，仅当它显示为该组中的第一个孩子时。

The following solution answers the OP's question on selecting the first element with a specific ID:

以下解决方案回答了 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>