bootstrap引入cdn后无法修改CSS样式---CSS优先级机制

bootstrap引入外部cdn后首先要有顺序，先引入bootstrap-combined.min.css，再引入页面自定义的cdn，但是有时候明明按照顺序来，但是css文件就是无法修改样式，这是因为涉及到CSS的优先级机制，最近就遇到这种情况，举个栗子：

为了使用bootstrap在页面翻转时有这种向左向右的图标， bootstrap引入cdn后无法修改CSS样式---CSS优先级机制

引入外部cdn

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">

但是引入外部cdn后，发现之前已经调节好的箭头位置又被打回原形，成了这个样子

bootstrap引入cdn后无法修改CSS样式---CSS优先级机制

我觉得这样用户体验不好，右键查看元素，看看出现什么问题

bootstrap引入cdn后无法修改CSS样式---CSS优先级机制

发现问题了，圈出来的这段复制过来，在css文件中修改一下，把left：50%改成left：-50%，但是并没有什么卵用，原因就在于CSS的优先等级机制，敲黑板！！！

选择器的优先权：

内联样式style="">id选择器>class类选择器>HTML 标签选择器，它们占据的权值大小同样由大到小，所以在选择器中尽可能详细的寻找所需要改变样式的元素，为了增加它的权值比重，在使用类选择器时，你可以从最外面的类一个个加起来，这样权值会增加，比如：

.a .b .c{
    background: center;
}

但是我觉得这样有点麻烦，不是说id选择器大于类选择器吗，直接给需要修改的元素加个id就可以了，然后就可以酱紫

#leftcontrol{
    left: -25%;
    margin-left: -25px;
}

搞定，你也可以使用

但是使用

!important
是一个坏习惯，尽量避免吧，调试的时候就有得凄凉了

秒客网