css3 - 纯css实现点击特效
问题描述
怎么用纯css实现和按钮一样的点击一次，然后改变样式？听说是用伪元素target，不过我不知道怎么操作
问题解答
回答1：<style> #select{display:none; } .box{width:100px;height:100px;border:1px solid red;display:none; } #select:checked + .box{display:block; }</style><label for='select'>点我！</label><input type='checkbox' id='select'><p class='box'>盒子</p>
也可以看一下这篇文章：CSS实现点击事件及实践http://www.cnblogs.com/pssp/p...
回答2：点击过的链接可以 :visited 。
回答3：visited的方法前面的小伙伴已经讲了；那我还是帮你搞懂伪元素 target 的用法吧。学东西毕竟得踏踏实实，搞懂想要的再去学新的。:target伪选择器指定的ID匹配上时，它的样式就会在这个ID元素上生效。
HTML:
<h1 id='section1'>Section 1</h1>
CSS:
:target { color: #afafaf;}h1:target { color: #f00;}
ID为”section1″的元素将会变红.
回答4：<!DOCTYPE html><html> <head><meta http-equiv='Content-Type' content='text/html; charset=UTF-8'><title>RunJS</title> <script type='text/javascript' src='https://www.haobala.com/js/sandbox/other/CanvasText-0.4.1.js'></script><style>p{color:#fff;height:80px;width:220px;background-color:#abcdef;line-height:80px;text-align:center;}a:visited>p{ background:#000;}</style> </head> <body><a href='https://www.haobala.com/wenda/5745.html#' >我是一个连接<p> 我是一个p</p></a> </body></html>
像这样用visited然后可以控制a的子元素的样式，+选择器不支持，只支持hover、active。回答5：
貌似没有类似jquery的toogleClass(不记得拼写了)的功能吧，不过，倒是input有个checked属性。你可以使用兄弟选择器来设置，比如input+label和input:checked+label来区分，但是，这个明显和你说的也不太一样，这个其实是通过获取焦点和失去焦点来判断的。实在不行就用JS吧
回答6：现在css只有hover visited 才能监听到鼠标滑动过的事件 要是点击改变样式 一般只能结合js来实现
回答7：jquery 的slideToggle
相关文章：
1. javascript - 小米浏览器中，图片导致fixed定位的元素无法显示2. javascript - 微信小程序 如何实现这种左滑动出现删除的办法？有相关api吗？3. angular.js - ng-grid 和tabset一起用时，grid width默认特别小4. python - 搜索大文件（20G左右）5. javascript - weex和node,js到底是怎样一个关系呢？6. Android-studio导入.so库问题？7. 用tp5框架写sql语句8. python - 有哪些预测算法可以根据实时增量数据更新算法并预测后续数据？9. 请问python中为什么我用for循环对嵌套列表进行赋值时，都是以i的最终值来计算的？10. 为什么HTML5规范中会包含一些和html无关的东西？如本地存储等。
网公网安备