18910140161

css选择器排除部分的元素:css排除选择?

顺晟科技

2022-10-19 08:59:06

310

老项目前端样式直接对h3这个标签设置了样式,现在导致发表的文章内容里面如果有h3标签的话,也会受这个全局样式影响,现在能知道的是文章内容外面的div有个id属性,值为 ac_content ,如果不去动那个全局的h3样式属性,该如何写才能让这个h3不影响文章内容里的h3样式呢?

可以使用:not选择器

h3:not(#ac_content h3){

}

image.png

image.png在你的style.css里加个这去覆写

覆盖一下?,有必要可以加个!important

#ac_content h3 {
 xxx:xxx 
}

如果你的文章id是带序号的,你可以用^= ,表示id以ac_content*开头的元素,结尾可以用$=

[id^=ac_content] h3 { 
    xxx:xxx
}

如果不想现在相关的内容不被历史遗留的样式所影响,因为是全局的样式可以考虑考虑在当前文章的页面中重置页面样式。同时也要注意 class 的权重,避免因为老样式的权重比现在的样式更高。比如说可以使用 #id .class element 的形式。

其实最好的是给历史遗留的代码添加限制,比如说楼上提到的 :not 选择器。如果不想改动老样式表的话,就只能靠覆写了。

我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航