.container {
background-color: #f7f7f7;
color: #333;
}
.container.dark-mode {
background-color: #333;
color: #fff;
}
.btn {
width: 100px;
height: 40px;
border-radius: 5px;
border: none;
background-color: #1e90ff;
color: #fff;
cursor: pointer;
}
.btn:hover {
background-color: #0077b3;
}
.btn:focus {
outline: none;
}
.btn.dark-mode {
background-color: #0077b3;
}
.btn.dark-mode:hover {
background-color: #1e90ff;
}
CSS开灯关灯效果
这是一个演示开关灯效果的页面
关灯
function toggleDarkMode() {
var container = document.querySelector('.container');
var btn = document.querySelector('.btn');
container.classList.toggle('dark-mode');
btn.classList.toggle('dark-mode');
if (btn.innerText === '关灯') {
btn.innerText = '开灯';
} else {
btn.innerText = '关灯';
}
}

上面的代码中，大家定义了两种不同的样式，分别是.container和.container.dark-mode，通过JavaScript代码动态的添加或移除.dark-mode类名来切换样式。同时，大家也定义了两种不同的按钮样式，分别是.btn和.btn.dark-mode，同样是通过添加或移除.dark-mode类名来切换样式。最后，大家使用JavaScript代码来实现点击按钮切换样式和文本。

需要注意的是，在支持CSS的浏览器中，开关灯效果是不需要使用JavaScript代码的，只需要在按钮的onclick事件中添加切换样式的语句即可。但是，在一些浏览器中可能存在不支持的情况，所以大家最好使用JavaScript来实现。