css的优先级

优先级

浏览器通过优先级来判断哪些属性值与一个元素最为相关，从而在该元素上应用这些属性值。优先级是基于不同种类选择器组成的匹配规则

优先级是如何计算的

1. 优先级就是分配给指定的 CSS 声明的一个权重，它由 匹配的选择器中的 每一种选择器类型的 数值 决定。
2. 而当优先级与多个 CSS 声明中任意一个声明的优先级相等的时候，CSS 中最后的那个声明将会被应用到元素上。
3. 当同一个元素有多个声明的时候，优先级才会有意义。因为每一个直接作用于元素的 CSS 规则总是会接管/覆盖（take over）该元素从祖先元素继承而来的规则。

由于浏览器是对css类的是通过从右向左来查找，例如（#main . content .content-left  p）这样的写法的，那么浏览器先找p，在找.content-left，

所以才会有：选中的大于继承比如要选一个p标签一个直接写到了p，而另一个只写到了包裹那个p标签的div上面，他们同时写了color的属性，那么就应用选中的color的颜色

例如（#main . content .content-left  p）这样的写法的，可能大家都知道要这样写，但大家可能不知道原理是什么？就是因为这个层叠性的原因

规则：

1. 类型选择器（标签选择器，h1）和伪元素（::before）个位
2. 类选择器（例如.example）,属性选择器（例如 [type="redio" ]）和伪类（例如 :hover）十位
3. ID选择器（#example）百位

通配选择符（*）和关系选择符（+，>,~, " "）和否定类（:not()）对优先级没有影响，（但是，在 :not() 内部声明的选择器会影响优先级）。

!important 

• 一定要优先考虑使用样式规则的优先级来解决问题而不是 !important
• 只有在需要覆盖全站或外部 CSS 的特定页面中使用 !important
• 永远不要在你的插件中使用 !important
• 永远不要在全站范围的 CSS 代码中使用 !important

不可以乱用，但可以提升原子类（比如.font18px{font-size:18px}这样的放开些的类），写在一个属性值的分号之前。

注意:important不影响继承性,不影响就近原则，只可以提升权重，也就是说当2值都为选中的时候比权重,但当我有!important的时候不够我的权重是不是低,都应用我的属性，当一个没有选中当前元素的写了!important也没用，继承的权重永远为0（根本没有所以无法提升）

怎样覆盖 !important

只需再添加一条 带 !important 的CSS规则，再给这个给选择器更高的优先级（添加一个标签，ID或类）；或是添加一样选择器，把它的位置放在原有声明的后面（总之，最后定义一条规则比胜）

   table td { height: 50px !important; }
.myTable td { height: 50px !important; }
#myTable td { height: 50px !important; }

2018/12/20补充

行内样式style=""的权重大于id，但小于！important

好了以上是我的总结如果有不同已经，欢迎与我讨论，谢谢