如何统一匹配所有CSS链接选择器,避免重复编写样式代码?
CSS选择器简化方案
你完全可以通过CSS的基础语法避免重复编写相同样式,有两种常用的实现方式:
方案1:选择器分组(灵活可扩展)
如果后续你可能需要单独调整某一个交互状态的样式,选择这种方式更易维护,把所有需要应用相同样式的选择器用逗号分隔即可共用同一段样式规则:
h1 a:link, h1 a:visited, h1 a:hover, h1 a:active { color: black; text-decoration: none; }
方案2:直接匹配父级下的a标签(最简写法)
如果四个交互状态的样式完全没有差异化需求,你甚至不需要写伪类选择器,直接给h1下的a标签设置基础样式,就会自动覆盖所有伪类的默认样式:
h1 a { color: black; text-decoration: none; }
如果后续需要新增某一个状态的特殊样式,只要单独对该伪类编写样式即可,优先级更高的伪类规则会自动覆盖基础样式。
内容的提问来源于stack exchange,提问作者inquisitivemongoose
相关产品推荐
相关产品推荐

