怎么用纯css实现和按钮一样的点击一次,然后改变样式?听说是用伪元素target,不过我不知道怎么操作
业精于勤,荒于嬉;行成于思,毁于随。
<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...
点击过的链接可以 :visited 。
:visited
visited的方法前面的小伙伴已经讲了;那我还是帮你搞懂伪元素 target 的用法吧。学东西毕竟得踏踏实实,搞懂想要的再去学新的。:target伪选择器指定的ID匹配上时,它的样式就会在这个ID元素上生效。
HTML:
<h1 id="section1">Section 1</h1>
CSS:
:target { color: #afafaf; } h1:target { color: #f00; }
ID为”section1″的元素将会变红.
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>RunJS</title> <script id="others_canvastext_041" type="text/javascript" class="library" src="/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="#" >我是一个连接 <p> 我是一个p </p></a> </body> </html>
像这样用visited然后可以控制a的子元素的样式,+选择器不支持,只支持hover、active。
貌似没有类似jquery的toogleClass(不记得拼写了)的功能吧,不过,倒是input有个checked属性。你可以使用兄弟选择器来设置,比如input+label和input:checked+label来区分,但是,这个明显和你说的也不太一样,这个其实是通过获取焦点和失去焦点来判断的。实在不行就用JS吧
现在css只有hover visited 才能监听到鼠标滑动过的事件 要是点击改变样式 一般只能结合js来实现
jquery 的slideToggle
也可以看一下这篇文章:CSS实现点击事件及实践http://www.cnblogs.com/pssp/p...
点击过的链接可以
:visited
。visited的方法前面的小伙伴已经讲了;那我还是帮你搞懂伪元素 target 的用法吧。学东西毕竟得踏踏实实,搞懂想要的再去学新的。
:target伪选择器指定的ID匹配上时,它的样式就会在这个ID元素上生效。
HTML:
CSS:
ID为”section1″的元素将会变红.
貌似没有类似jquery的toogleClass(不记得拼写了)的功能吧,不过,倒是input有个checked属性。你可以使用兄弟选择器来设置,比如input+label和input:checked+label来区分,但是,这个明显和你说的也不太一样,这个其实是通过获取焦点和失去焦点来判断的。实在不行就用JS吧
现在css只有hover visited 才能监听到鼠标滑动过的事件 要是点击改变样式 一般只能结合js来实现
jquery 的slideToggle