css选择器优先级，颜色反差，博客中css样式的正确设置

一、简介

博客园的文章是支持html代码和css样式的，即使是markdown写作。当某个标签需要特制样式时，我们可以自定义样式来覆盖掉原本的样式。

二、css样式优先级

参考至>>菜鸟教程<<

其中最重要的有两点。

①

内联样式 > ID 选择器(#) > 类选择器( . ) = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器

还有
内联样式 > 内部样式 > 外部样式

内联样式即写在标签中的style属性；内部样式即写在html文件其它位置的<style>标签；外部样式即<link>标签远程加载的样式。相同优先级有冲突的话，靠后的生效。

但是很容易发现即使是内联样式，也不生效的情况，那是因为

②

当一个标签同时被多个选择符选中，我们便需要确定这些选择符的优先级。我们有如下规则：

计算选择符中 ID 选择器的个数（a），计算选择符中类选择器、属性选择器以及伪类选择器的个数之和（b），计算选择符中标签选择器和伪元素选择器的个数之和（c）。按 a、b、c 的顺序依次比较大小，大的则优先级高，相等则比较下一个。若最后两个的选择符中 a、b、c 都相等，则按照"就近原则"来判断。

即样式前面的选择器多的优先级高

一般来说我们自己的标签写一个id，用上父级标签的id和自己的id就有足够高的优先级了

如

#topics #no-box-shadow-img{
	box-shadow:none;
}

三、css颜色反差

主要是黑白反差

当主题在黑白切换时，部分颜色反差，无需js

lighten(var(--blog-bg-color))

https://juejin.cn/post/6874958645952692238

ヽ( ⌒ω⌒)人(=^‥= )ﾉ