17

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

更新：解决方案

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

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

6 回答 6

35

如果要选择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你喜欢的任何东西:)）

于 2013-06-09T05:48:10.770 回答
14

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

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

如果您想在 id 中进行选择，也一样，只需执行以下操作：

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

但是，如果您确实有一个 id，那么无论如何您都应该只有一个。否则，您将编写无效的 HTML。只需对 id 使用像这样的简单选择器：

#yourID{
    // Your Properties
}

另请注意，在@sourcecode 的答案中，他目前没有>在他的示例中。如果没有这个，它将不会选择类中的第一个 div，而是会选择该类中的每个第一个 div。检查这个小提琴的一个例子：

演示每个组的第一选择器

这是我的答案的演示：

仅演示首选选择器

于 2013-06-09T05:47:57.890 回答
1

您可以使用

.class div:first-child{ your css }

于 2013-06-09T05:34:45.093 回答
0

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

于 2013-06-09T05:35:53.883 回答
0

您可以使用以下伪类：

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

或者您可以按 ID 选择：

  1. #元素ID
  2. div[id="elementID"]

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

于 2013-06-09T05:55:21.340 回答
0

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

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

于 2020-01-29T17:50:52.877 回答