css正反两张图 |css表述正确的是什么

/* 正图 */
div {
background-color: #ffffff;
color: #000000;
border: 2px solid #000000;
}
/* 反图 */
div {
background-color: #000000;
color: #ffffff;
border: 2px solid #ffffff;
}

上面是一个简单的例子，当大家需要正反两种颜色搭配时，可以将两个样式都写出来，通过切换类名等方式来进行切换。但是随着要求愈发细腻，写两份CSS变得十分繁琐。

/* 正图 */
div {
background-color: #ffffff;
color: #000000;
border: 2px solid #000000;
}
/* 反图 */
div {
background-color: #ffffff;
color: #000000;
border: 2px solid #000000;
}
@media (prefers-color-scheme:dark) {
/* 反图 */
div {
background-color: #000000;
color: #ffffff;
border: 2px solid #ffffff;
}
}

上面利用了媒体查询的方式，可以根据系统或浏览器的颜色模式自动应用不同的样式。这么写的好处在于： – 可以省去一份代码，减少代码量。 – 代码修改起来方便，只需要同时修改正反两组代码，而不需要改动多余的代码。 – 当浏览器或系统颜色变化时，代码可以自动调整，避免了使用JS等其他方式。

随着Web开发技术的不断发展，CSS也在不断迭代和进化中，未来或许会有更加优秀的解决方案出现。