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

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

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

＆＃13;

＆＃13;

.clickable select {
    cursor: pointer;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;