CSS（Cascading Style Sheets）是Web開發中不可或缺的一部分，它可以讓我們更加方便地對網站進行美化和布局。不過，在使用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也在不斷迭代和進化中，未來或許會有更加優秀的解決方案出現。