css3如何通过点击改变样式

css3有很多动画但是只支持hover这种鼠标放上触发的,点击触发的有吗,active和visited都不能很好的应用

CSS3 有一个 :target 属性


这是一个简单的DEMO 高级用法可以再百度搜索:

<!DOCTYPE html>
<html>
<head>
<style>
:target {
    border: 2px solid #D4D4D4;
    background-color: #e5eecc;
}
</style>
</head>
<body>

<h1>This is a heading</h1>

<p><a href="#news1">Jump to New content 1</a></p>
<p><a href="#news2">Jump to New content 2</a></p>

<p>Click on the links above and the :target selector highlight the current active HTML anchor.</p>

<p id="news1"><b>New content 1...</b></p>
<p id="news2"><b>New content 2...</b></p>

<p><b>Note:</b> Internet Explorer 8 and earlier versions do not support the :target selector.</p>

</body>
</html>

温馨提示:答案为网友推荐,仅供参考
第1个回答  2019-03-09
我提供一个思路,这个思路应该可以实现所有类似的问题。
使用input的type='radio'类型,radio在css3样式中有:checked这样的伪样式,
通过:checked的伪样式实现,点击切换样式,这样就不用借助js来实现
<input type="radio" value="" id="Input_Radio" hidden>
#Input_Radio:checked~input{background-color: #333;color:#fff;}
第2个回答  2015-10-19
你应该求助js,而不是css...方向错了!追问

js谁都知道,就是问css能不能实现

追答

我觉得我说得很明显了,自己判断

相似回答