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

Question

下面的 html 片段中的外部div 应该应用了 css of {cursor: pointer}，但它被 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>