类的第一个元素的CSS选择器

CSS

Davaid番长十三

2020-03-15

我有一堆具有类名的元素red，但是我似乎无法class="red"使用以下CSS规则选择第一个元素：

.red:first-child {
    border: 5px solid red;
}

<p class="red"></p>
<div class="red"></div>

该选择器有什么问题，我该如何纠正？

多亏了这些评论，我才知道该元素必须是其父元素的第一个子元素才能被选中，而事实并非如此。我具有以下结构，并且该规则失败，如注释中所述：

.home .red:first-child {
    border: 1px solid red;
}

<div class="home">
    <span>blah</span>
    <p class="red">first</p>
    <p class="red">second</p>
    <p class="red">third</p>
    <p class="red">fourth</p>
</div>

我该如何针对上课的第一个孩子red？

第1636篇《类的第一个元素的CSS选择器》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共15个回答

神奇米亚神乐 2020.03.15

试试这个解决方案：

 .home p:first-of-type {
  border:5px solid red;
  width:100%;
  display:block;
}

<div class="home">
  <span>blah</span>
  <p class="red">first</p>
  <p class="red">second</p>
  <p class="red">third</p>
  <p class="red">fourth</p>
</div>

CodePen链接

达蒙小胖 2020.03.15

试试这个简单有效的方法

 .home > span + .red{
      border:1px solid red;
    }

Stafan路易 2020.03.15

我相信使用相对选择器+来选择紧随其后的元素，在这里效果最好（之前很少有人建议）。

这种情况下也可以使用此选择器

.home p:first-of-type

但这是元素选择器，而不是第一类。

在这里，您可以找到不错的CSS选择器列表：https : //kolosek.com/css-selectors/

Pro路易猴子 2020.03.15

您可以将代码更改为这样的代码才能正常工作

<div class="home">
  <span>blah</span>
  <p class="red">first</p>
  <p class="red">second</p>
  <p class="red">third</p>
  <p class="red">fourth</p>
</div>

这为您完成了工作

.home span + .red{
      border:3px solid green;
    }

这是SnoopCode的CSS参考。

小小Near 2020.03.15

尝试这个：

    .class_name > *:first-child {
        border: 1px solid red;
    }

梅宝儿 2020.03.15

根据您更新的问题

<div class="home">
  <span>blah</span>
  <p class="red">first</p>
  <p class="red">second</p>
  <p class="red">third</p>
  <p class="red">fourth</p>
</div>

怎么样

.home span + .red{
      border:1px solid red;
    }

这将选择class home，然后选择span 元素，最后选择在span元素之后立即放置的所有.red元素。

参考：http : //www.w3schools.com/cssref/css_selectors.asp

Davaid斯丁 2020.03.15

我正在使用以下CSS为列表ul li提供背景图像

#footer .module:nth-of-type(1)>.menu>li:nth-of-type(1){
  background-position: center;
  background-image: url(http://monagentvoyagessuperprix.j3.voyagesendirect.com/images/stories/images_monagentvoyagessuperprix/layout/icon-home.png);
  background-repeat: no-repeat;
}

<footer id="footer">
  <div class="module">
    <ul class="menu ">
      <li class="level1 item308 active current"></li>
      <li> </li>
    </ul> 
  </div>
  <div class="module">
    <ul class="menu "><li></li>
      <li></li> 
    </ul>
  </div>
  <div class="module">
    <ul class="menu ">
      <li></li>
      <li></li>
    </ul>
  </div>
</footer>

Itachi蛋蛋 2020.03.15

我在我的项目中得到了这个。

div > .b ~ .b:not(:first-child) {
	background: none;
}
div > .b {
    background: red;
}

<div>
      <p class="a">The first paragraph.</p>
      <p class="a">The second paragraph.</p>
      <p class="b">The third paragraph.</p>
      <p class="b">The fourth paragraph.</p>
  </div>

卡卡西西里 2020.03.15

您可以使用nth-of-type（1），但请确保该站点不需要支持IE7等，如果是这种情况，请使用jQuery添加主体类，然后通过IE7主体类查找元素，然后通过元素名称查找，然后添加在第n个孩子的样式中。

神无小宇宙 2020.03.15

由于其他答案都涵盖了问题所在，因此我将尝试另一半，以及如何解决。不幸的是，我不知道您在这里只有CSS解决方案，至少我没有想到。不过，还有其他选择。

first生成元素时，为其分配一个类，如下所示：
```
<p class="red first"></p>
<div class="red"></div>
```
CSS：
```
.first.red {
  border:5px solid red;
}
```
这个CSS只匹配的元素都 first和red类。
另外，也可以在JavaScript中执行相同的操作，例如，这是使用与上述相同的CSS来执行此操作的jQuery：
```
$(".red:first").addClass("first");
```

Green米亚 2020.03.15

上面的答案太复杂了。

.class:first-of-type { }

这将选择第一类。MDN来源

Mandy小胖Pro 2020.03.15

正确答案是：

.red:first-child, :not(.red) + .red { border:5px solid red }

第一部分：如果元素是其父元素的第一个元素，并且具有“ red”类，则它将获得边框。
第二部分：如果“ .red”元素不是其父元素的第一个元素，而是紧随其后的是没有“ .red”类的元素，则也应享有该边界的荣誉。

提琴或没有发生。

菲利普·道布迈尔的答案虽然被接受，但却是不正确的-见附件。
BoltClock的答案会起作用，但不必要地定义和覆盖样式
（尤其是这样的问题，否则它将继承不同的边框-您不想将其他声明为border：none）

编辑：如果您多次跟随非红色“红色”，则每个“第一个”红色将获得边框。为避免这种情况，需要使用BoltClock的答案。见小提琴

达蒙神无伽罗 2020.03.15

该:first-child选择的目的是，像它的名字说，选择父标签的第一个孩子。子级必须嵌入相同的父级标记中。您的确切示例将起作用（只需在此处进行尝试）：

<body>
    <p class="red">first</p>
    <div class="red">second</div>
</body>

也许您已将标签嵌套在其他父标签中？您的班级标签red真的是父母标签下的第一个标签吗？

还要注意，这不仅适用于整个文档中的第一个这样的标签，而且每次在其周围包裹新的父对象时，例如：

<div>
    <p class="red">first</p>
    <div class="red">second</div>
</div>
<div>
    <p class="red">third</p>
    <div class="red">fourth</div>
</div>

first然后third会变成红色。

更新：

我不知道为什么martyn删除了他的答案，但是他有解决方案，:nth-of-type选择器：

.red:nth-of-type(1)
{
    border:5px solid red;
}

<div class="home">
    <span>blah</span>
    <p class="red">first</p>
    <p class="red">second</p>
    <p class="red">third</p>
    <p class="red">fourth</p>
</div>

Credits to Martyn. More infos for example here. Be aware that this is a CSS 3 selector, therefore not all browsers will recognize it (e.g. IE8 or older).

飞云十三 2020.03.15

您可以使用first-of-type或nth-of-type(1)

.red {
  color: green;  
}

/* .red:nth-of-type(1) */
.red:first-of-type {
  color: red;  
}

<div class="home">
  <span>blah</span>
  <p class="red">first</p>
  <p class="red">second</p>
  <p class="red">third</p>
  <p class="red">fourth</p>
</div>

前端LSam 2020.03.15

要与选择器匹配，元素必须具有的类名，red并且必须是其父级的第一个子级。

<div>
    <span class="red"> <!-- MATCH -->
</div>

<div>
    <span>Blah</span>
    <p class="red"> <!-- NO MATCH -->
</div>

<div>
    <span>Blah</span>
    <div><p class="red"></div> <!-- MATCH -->
</div>

相似问题

基于react18+vite4+zustand网页端仿微信聊天实例

0 回答

基于tauri+vite4+pinia跨端后台管理系统应用

0 回答

HTML5 Drag与Drop 拖动时更改图标/光标

5 回答

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

25 回答

基于tauri+vue3跨端聊天应用|tauri仿微信模板

0 回答

Ace Editor一款比较好用的展示代码组件

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android