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

【问题标题】：User Agent Stylesheet Overriding Own Styles覆盖自己的样式的用户代理样式表
【发布时间】：2016-06-10 14:58:54
【问题描述】：

下面的 html sn-p 中的外部 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 规则使用更好的选择器。什么是覆盖用户代理样式表的选择器？

【问题讨论】：

标签： css

【解决方案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>

【讨论】：

干杯。我正在查看一些 css 选择器备忘单，他们没有说明 [.class element] 实际选择的是什么。这会选择什么？我所有的可点击类的 div 和按钮似乎仍然被这个选择器选中。
它正在选择<select> 元素。 .clickable 类的 div 扩展了视口的宽度，而 <select> 元素覆盖了下拉列表的整个区域。如果这是您的首选答案，请投票。