无法定位div内的按钮标记

Question

我有像这样的HTML结构

<div class="buttons controls">
    <a href="#B"><button>Next</button></a>
    <a href="#Z"><button>Previous</button></a>
</div>      

我正在定位按钮

.controls>button
.buttons.controls>button

但它不起作用。我想知道为什么??

Answer 1

因为.button在锚点内，因此它不是你在css中尝试做的.controls类的直接后代

试试这个：

.controls .button {
   /* style here */
}

或类似上面的答案

.controls > a > button {
  font-size: 20px;
}

Answer 2

好吧，因为您的<button>元素不是div.controls的子元素。您可以使用.controls a > button或.controls > a > button

A > E

  

任何A元素是A元素的子元素（即直接后代）

<强> MDN Documentation - Selectors based on relationships

修改

.controls > a > button更具体。因此，只有当您的HTML看起来像

时才会应用它

<div class="buttons controls">
    <a href='#'>
        <button>MyButton</button>
    </a>
</div>` 

.controls a button是一个更通用的选择器，所以它也会应用这样的HTML -

<div class="buttons controls">
    <div class="myDiv">
        <a href="#H">
            <button>MyButton</button>
        </a>
    </div>
</div>

如您所见，您还可以指定div作为<a>元素的父级，并且仍然会应用CSS样式。