jQuery 单击按钮时更改背景，仅使用 CSS？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19260401/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change background on button click, using CSS only?
提问by A T
Is it possible to change the background color on buttonclick; of the entire document, using only CSS and HTML5?
是否可以在button单击时更改背景颜色；整个document，只使用 CSS 和 HTML5？
(e.g.: it's trivial in JavaScript)
（例如：它在 JavaScript 中很简单）
采纳答案by Joe
Based on the fiddle I posted in the comments I've modified it very slightly to use the Bootstrap button CSS.
根据我在评论中发布的小提琴，我对它进行了轻微修改以使用 Bootstrap 按钮 CSS。
Just include Bootstrap's CSS file then use the code below.
只需包含 Bootstrap 的 CSS 文件，然后使用下面的代码。
HTML
HTML
<label for="check" class="btn btn-default">Toggle background colour</label>
<input type="checkbox" id="check" />
<div></div>
CSS
CSS
div {
width: 100%;
height: 100%;
background: #5CB85C;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
label.btn {
position: absolute;
top: 10px;
left: 10px;
z-index: 2;
}
input[type="checkbox"]{
display: none;
}
input[type="checkbox"]:checked + div{
background: #5BC0DE;
}
This uses the adjacent sibling selector.
这使用相邻的兄弟选择器。
Here it is working: http://jsfiddle.net/eYgdm/(I've added *-user-select: none;to prevent selection of the label text but it's not required for the label to work)
它正在工作：http: //jsfiddle.net/eYgdm/（我已添加*-user-select: none;以防止选择标签文本，但标签不需要工作）
Browser support
浏览器支持
Chrome, Firefox [Desktop & Mobile] (Gecko) ≥ 1.0, Internet Explorer ≥ 7, Opera ≥ 9 and Safari ≥ 3 References: Attribute selectorsand Adjacent sibling selectors
Chrome、Firefox [桌面和移动] (Gecko) ≥ 1.0、Internet Explorer ≥ 7、Opera ≥ 9 和 Safari ≥ 3 参考：属性选择器和相邻同级选择器
回答by Jeff
You could do something like this -- using the adjacent css selector :
你可以做这样的事情 - 使用相邻的 css 选择器：
<button class="btn">button</button>
<div class="content"></div>
btn:active + .content{
background: blue;
}
回答by frenchie
No, there's no concept of "click then do something"in CSS.
不，CSS 中没有“点击然后做某事”的概念。
回答by Prusprus
Unfortunately, there's no backtracing in css rules; for a css selecter, there's no way to climb up an element's ancestors.
不幸的是，css 规则中没有回溯；对于 css 选择器，没有办法爬上元素的祖先。
回答by Sean
You can (ab?)use the :target selector. This probably won't work in older browsers. Here's a super simple example I made that toggles the background when the link is clicked.
您可以（ab？）使用 :target 选择器。这可能不适用于较旧的浏览器。这是我制作的一个超级简单的例子，当点击链接时切换背景。
The concept is to apply CSS styling to targeted elements. In the code below, clicking the link will target the body's ID, which applies the style in body:target (changing the background color).
这个概念是将 CSS 样式应用于目标元素。在下面的代码中，单击链接将定位正文的 ID，这将应用 body:target 中的样式（更改背景颜色）。
<html>
<head>
<style>
body { background-color:#333; }
body:target { background-color:#fff; }
</style>
</head>
<body id="myBody">
<a href="#myBody">Click</a>
</body>
</html>
回答by crablab
There is a way to do it:
有一种方法可以做到：
.cc2:focus {
background-color: #19A3FF;}
The :focus basically means when you click on the element with the class cc2 it will turn it's background blue :) Hope that helps.
:focus 基本上意味着当您单击具有类 cc2 的元素时，它会将其背景变为蓝色 :) 希望有所帮助。
