html - nth-of-type css 选择器以类的第一个元素为目标

原文 标签 html css css-selectors

我试图理解为什么会这样 nth-of-type选择器未按预期工作。我的目标是做第一个 .row元素红色,以及第一个蓝色之后的所有其他元素,同时将元素保留为绿色。

https://jsfiddle.net/darrengates/pa34zyjd/14/

.wrapper div {
  width: 200px;
  background-color: green;
  color: white;
  margin: 5px;
  padding: 5px;
}
.wrapper .row:nth-of-type(n+1) {
  background-color: red;
}
.wrapper .row:nth-of-type(n+2) {
  background-color: blue;
}
<div class="wrapper">
  <div class="option">option</div>
  <div class="button">some button</div>
  <div class="row">I wanna be red</div>
  <div class="row">I wanna be blue</div>
  <div class="row">I wanna be blue</div>
  <!-- all other row elements after the first should be blue -->
</div>

最佳答案

n-th-of-type选择器指的是 标签类型 在同一级别上,不是类(class),在本例中为 div标签内的兄弟标签 .wrapper .因此你需要这个 CSS,因为它们是第三个和第四个 div在那里:

.wrapper .row:nth-of-type(n+3) {
  background-color: red;
}
.wrapper .row:nth-of-type(n+4) {
  background-color: blue;
}

https://jsfiddle.net/cb3qd8t6/

关于html - nth-of-type css 选择器以类的第一个元素为目标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42170661/

相关文章:

jquery - 如何覆盖3个div,以允许触发所有底层div的事件处理程序的点击?

javascript - Jquery CSS选择器需要满足三个条件

css - 有没有一种方法可以忽略:empty伪类的空白?

php - 尝试使用PHP和mySQL创建可编辑的HTML表,但该表不会更新

javascript - 取消将鼠标悬停在图像上的部分模糊

html - flex框内的元素未采用所需的大小

javascript - jQuery下拉列表导航栏不起作用

html - 非HTML属性的CSS选择器

html - 是什么导致CSS3动画无法显示

C# Internet Explorer 和剥离 HTML 标签