{"componentChunkName":"component---src-templates-blog-post-js","path":"/css-priority/","result":{"data":{"markdownRemark":{"html":"<h2>引言</h2>\n<p>有时通过不同的选择器匹配同一个元素，虽然知道几个优先级比如内联样式是最高级，但还是在开发中不那么得心应手，这次就来详细的学习下，不同种类选择器的匹配规则。</p>\n<h2>优先级是如何计算的？</h2>\n<blockquote>\n<p>优先级就是分配给指定的CSS声明的一个权重，它由匹配的选择器中的每一种选择器类型的数值决定。</p>\n</blockquote>\n<p>这是MDN上的官方定义，我们也知道当多个CSS声明中优先级相等的时候，CSS中最后的那个声明将会被应用到元素上。而对于从祖先元素继承而来的规则会被直接作用于元素的CSS规则总是会接管/覆盖（take over）</p>\n<h2>选择器类型优先级(递减)</h2>\n<ul>\n<li>内联样式 style=\"font-weight:bold\"</li>\n<li>id选择器 #example</li>\n<li>类选择器 .example，属性选择器 [type=\"radio\"]和伪类 :hover</li>\n<li>类型选择器 h1和伪元素 ::before</li>\n</ul>\n<p><strong>通配选择符</strong> * <strong>关系选择符</strong> +, >, ~, ' ', || <strong>否定伪类</strong>:not()对<strong>优先级</strong>没有影响。但是，在 :not() 内部声明的选择器会影响优先级。</p>\n<h2>!important</h2>\n<p>这个规则很熟悉，在不确定优先级时，就愣用!important,就可以让选择器生效，但这是个<strong>坏习惯</strong>，还有从可维护性角度考虑，破坏了样式表中的固有的级联规则 使得调试找bug变得更加困难了，还是少用这个规则为好。<br>\n当两条相互冲突的带有 !important 规则的声明被应用到相同的元素上时，拥有更大优先级的声明将会被采用。\n在MDN上还有一些使用!important的经验法则</p>\n<blockquote>\n<p>1.一定要优化考虑使用样式规则的优先级来解决问题而不是 !important</p>\n</blockquote>\n<p>2.只有在需要覆盖全站或外部 CSS 的特定页面中使用     !important<br>\n3.永远不要在你的插件中使用 !important<br>\n4.永远不要在全站范围的 CSS 代码中使用 !important</p>\n<h2>避开!important的方法</h2>\n<ul>\n<li>更好地利用 CSS 级联属性</li>\n<li>使用更具体的规则。在选择的元素之前，增加一个或多个其他元素，使选择器变得更加具体，并获得更高的优先级。</li>\n</ul>\n<h2>怎样覆盖 !important</h2>\n<ul>\n<li>只需再添加一条带!important 的CSS规则，再给这个给选择器更高的优先级，或是添加一样选择器，把它的位置放在原有声明的后面</li>\n<li>或者使用相同的选择器，但是置于已有的样式之后</li>\n<li>改写原来的规则，以避免使用!important</li>\n</ul>","timeToRead":2,"frontmatter":{"title":"css优先级","date":"September 30, 2019","spoiler":null},"fields":{"slug":"/css-priority/"}}},"pageContext":{"slug":"/css-priority/","previous":{"fields":{"slug":"/z-index-attribute-of-css/"},"frontmatter":{"title":"理解css的z-index属性(层叠上下文)"}},"next":{"fields":{"slug":"/bfc-block-level-formatting-context/"},"frontmatter":{"title":"什么是BFC ？"}}}},"staticQueryHashes":["3649515864","63159454"]}