bootstrap样式跟自定的css样式冲突时怎么解决

深藏阁楼爱情的钟 2021-10-08 07:20 355阅读 0赞

例子：如图![70][]

如图正常情况下我们会选择重写css样式让其覆盖原有的样式，如图![70 1][]

但经过测试发现并没有效果。。。

**这时我们下介绍下css 选择器**

### 一、优先级分类 ###

通常可以将css的优先级由高到低分为6组：

1.  第一优先级：无条件优先的属性只需要在属性后面使用！important。它会覆盖页面内任何位置定义的元素样式。ie6不支持该属性。
2.  第二优先级：在html中给元素标签加style，即内联样式。该方法会造成css难以管理，所以不推荐使用。
3.  第三优先级：由一个或多个id选择器来定义。例如，\#id\{margin:0;\}会覆盖.classname\{margin:3pxl\}
4.  第四优先级：由一个或多个类选择器、属性选择器、伪类选择器定义。如.classname\{margin:3px\}会覆盖div\{margin:6px;\}
5.  第五优先级：由一个或多个类型选择器定义。如div\{marigin:6px;\}覆盖\*\{margin:10px；\}
6.  第六优先级：通配选择器，如\*\{marigin:6px;\}

### 二、选择器的权重及优先规则 ###

在css中，会根据选择器的特殊性来决定所定义的样式规则的次序，具有更特殊选择器的规则优先于一般选择器的规则。如果两个规则的特殊性相同，那么后定义的规则优先。

那么如何计算选择器的特殊性呢？那就要用到选择器的权重计算了。计算规则如下图：

![Center][]

我们把特殊性分为4个等级，每一个等级代表一类选择器，没个等级的值相加得出选择器的权重。

4个等级的定义如下：

*  第一等级：代表内联样式，如style=""，权值为 1000
 *  第二等级：代表id选择器，如\#content，权值为100
 *  第三等级：代表类，伪类和属性选择器，如.content，权值为10
 *  第四等级：代表标签选择器和伪元素选择器，如div p，权值为1

这时本人就重写id选择器

![70 2][]

如图![70 3][]

最终效果如图：![70 4][]

**最终我们会发现ID选择器的优先级大于类选择器**

[70]: /images/20211008/7e86ce982eb54eb4ad770ea4304ec4fe.png
[70 1]: /images/20211008/813505721b6745ad984f440de172a5a4.png
[Center]: /images/20211008/58e08660b7ce45b38c6aa241702fa23a.png
[70 2]: /images/20211008/460dde44ac8c49b3bbf1b6b9cb271489.png
[70 3]: /images/20211008/9e10f3a4449b41db8128c64297647230.png
[70 4]: /images/20211008/f778471cc7514cd2ac0dcb75bebc50ac.png