css - 用户代理样式表覆盖自己的样式

Question

下面 html 片段中的外部 div 应该应用了 {cursor: pointer} 的 css，但它被 user agent stylesheet 覆盖了，因为当我在 chrome 开发者工具中查找计算样式时，我可以看到。

<div class="select clickable">
        <span class="arr"></span>
        <select data-bind="options: _regions,
            optionsText: 'name',
            optionsValue: 'geonameId',
            value: selectedCity,
            optionsCaption: 'REGION'
            "><option value="">REGION</option>
        </select>
    </div>

这是我的相关CSS:

.clickable {
    cursor: pointer !important;
}

我想我需要为 css 规则使用更好的选择器。什么是将覆盖用户代理样式表的选择器？

Answer 1

将选择器更改为选择元素:

.clickable select {
    cursor: pointer;
}

<div class="select clickable">
    <span class="arr"></span>
    <select data-bind="options: _regions,optionsText: 'name',optionsValue: 'geonameId',value: selectedCity,optionsCaption: 'REGION'">
        <option value="">REGION</option>
    </select>
</div>