Question

如何只选择此代码中的第一个按钮？

在我的情况下，它甚至更嵌套，但这段代码对我来说也是一个问题。

<div class="container">
  <div class="some_class">
    <span>abc</span>
    <button class="btn">...</button>
  </div>
  <div class="some_class">
    <span>abc</span>
    <button class="btn">...</button>
  </div>
  <div class="some_class">
    <span>abc</span>
    <button class="btn">...</button>
  </div>
</div>

Answer 1

这将有效

.container .some_class:first-child button {
    /* rules here */
}

http://jsfiddle.net/cUu82/1/

你可以使用.some_class：first-child按钮，如果这些是页面上唯一的按钮

第一个孩子（https://developer.mozilla.org/en/docs/Web/CSS/:first-child）将选择第一个some_class div，这可能是你唯一的问题

Answer 2

您将使用:first-child伪类。

EXAMPLE HERE

.container .some_class:first-child button {
    background:black;
}

或者，假设标记可能不同，可能需要使用类似这样的内容，以确保即使.some_class不是第一个元素，也会选择第一个按钮。 (example)

.container :first-child button {
    background:black;
}

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

2 个答案: