css权重食用详情

1.权重

1.1标签选择器/伪类(权重1);

1.2类选择器(权重10);

1.3id选择器(权重100);

1.4行内样式(权重1000);

1.5!important(权重最高);

2.权重计算

2.1 eg:标签选择器+类选择器,div .lol=1+10=11权重

3.注意事项

3.1碰到样式覆盖时，最先选择的往往是!important。

注意:但是这种做法不好，应该优先考虑从样式的级联属性或者位置来解决问题

引出:!important的使用时机

1. 覆盖组件中的style或者!important的样式

2. 组件用于覆盖全局样式

那么如何覆盖!important的样式呢?

1. 使用比原来的important样式优先级更高的选择器

2. 使用相同的选择器，但是位置在原来的选择器之后