页面引入组件时，页面上的CSS覆盖了组件的CSS，如何解决这种情况呢
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
6
1141
收藏
问题：页面上的CSS覆盖了组件的CSS
你说的意思应该是页面上定义CSS，但是被优先继承，导致外部链接中的组件CSS失效
被优先继承,导致失效的原因有几个：
style="color:red"，这个优先级很高，会覆盖其他样式class="menu"、class="nav"，因为这些是HTML5的新元素，有些组件库会做默认设置解决方案
其实想要避免这些问题很简单
1. 代码编写规范，不使用行内样式
2. 编写样式时，采用模块化的命名规范，这里引荐Alice的命名规范，比如：
HTML
CSS
这个肯定是页面的样式和组件的样式名称是一样导致的，再者就是在class或id一样的情况下组件css的优先级没有页面css对应的优先级高。
对应的解决办法就是修改页面的css和组件css冲突的部分的名称，或者把组件的css优先级调整到大于页面css的优先级。
组件的css后引入。 如果权重还是没有页面的高。
建议给组件css都 套上一个 id， 这样比较好一点。正好也给你的组件用上同一个id.方便隔离。
覆盖》不明白什么意思
!important加上还会覆盖吗》》》》