如何使用CSS隐藏处于disabled禁用状态的左箭头按钮

你当前写的CSS没有绑定「禁用状态」的筛选条件，会匹配所有data-tour-elem属性值为left-arrow的元素，不管按钮是否可用都会被隐藏，完全不符合预期效果。

你需要同时匹配两个特征才触发隐藏：元素是导览左箭头、元素处于disabled禁用状态，代码如下：

[data-tour-elem="left-arrow"][disabled] {
    display: none !important;
}

• 上面代码里的!important是用来覆盖导览组件自带的高优先级样式（比如组件写的内联样式、高权重类名样式），如果不加的话很可能因为选择器优先级不够，导致隐藏规则被覆盖
• 如果你用的导览库是通过加.disabled类名标记禁用状态，而不是用原生disabled属性，把选择器替换成[data-tour-elem="left-arrow"].disabled即可
• 不要给不带状态限定的[data-tour-elem="left-arrow"]选择器设置display: none，否则会把正常可点击的左箭头按钮也一起隐藏

内容的提问来源于stack exchange，提问作者user8779054