html - 无法定位 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>元素不是 div.controls 的子元素.你可以使用 .controls a > button或 .controls > a > button

A > E

Any E element that is a child (i.e. direct descendant) of an A element

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> 的 parent 元素和 CSS 样式仍将应用。