单击按钮更改背景，仅使用CSS？

是否可以在button点击时更改背景颜色; 整个document ，只使用CSS和HTML5？

（例如： 它在JavaScript中是微不足道的 ）

Answer 1

基于我在评论中发布的小提琴我已经稍微修改它以使用Bootstrap按钮CSS。

只需包含Bootstrap的CSS文件，然后使用下面的代码。

HTML

 Toggle background colour  
 

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; } 

这使用相邻的兄弟选择器 。

这是工作： http ： //jsfiddle.net/eYgdm/ （我添加了*-user-select: none;以防止选择标签文本，但标签不需要工作）

浏览器支持

Chrome，Firefox [桌面和手机]（Gecko）≥1.0，InternetExplorer≥7，Opera≥9，Safari≥3参考： 属性选择器和相邻的同级选择器

Answer 2

你可以这样做 – 使用相邻的css选择器：

 button 
 btn:active + .content{ background: blue; } 

http://jsfiddle.net/JeffreyTaylor/g47Uh/

Answer 3

不，在CSS中没有“点击然后做某事”的概念。

Answer 4

不幸的是，css规则没有回溯; 对于一个css选择器，没有办法爬上一个元素的祖先。

Answer 5

你可以（ab？）使用：target选择器。 这可能不适用于旧版浏览器。 这是我做的一个非常简单的例子，它在单击链接时切换背景。

这个概念是将CSS样式应用于目标元素。 在下面的代码中，单击链接将定位正文的ID，该ID在body：target（更改背景颜色）中应用样式。

      Click   

的jsfiddle

Answer 6

有一种方法可以做到：

 .cc2:focus { background-color: #19A3FF;} 

：焦点基本上意味着当你点击带有cc2类的元素时它会将它变为背景蓝色:)希望有所帮助。