神器的css，css保留状态（css事件）

经过我的分析css保留改变的状态总共有三种方法。

（1）、a标签锚点点击，然后根据:target伪类保留状态。

css

        #a:target+div,#b:target+div{
            color: teal;
        }

html

    <a id="a" href="#a">123</a>
    <div>123</div>
    <a id="b" href="#b">456</a>
    <div>123</div>

注意：问题很明显就是整个页面只能保留一个状态　　

（2）、根据animation属性的animation-play-state，根据paused和running保留状态

css

        .test{
            position: relative;
            width: 100px;
            height: 100px;
            animation: anima 3s forwards;
            animation-play-state: paused;
        }
        @keyframes anima{
            from {left:0px}
            to {left:500px}
        }
        .test:hover{
            background-color: teal;
            animation-play-state: running;
        }

html

    <div class="test">123</div>

注意：问题也很明显只能保留animation的状态，而且只有hover方法。而且设置了forwards到达了底部事情就不会返回。（慎用）

（3）、最好用的方法，点击事件。根据label标签绑定前排的input的checkbox或者radio保留切换属性。最后根据伪类:checked来操作变化

1、最平常的用法

css

        #test1:checked~div{
            color: teal;
        }

html

        <input id="test1" type="checkbox"/>
        <label for="test1">
            456
        </label>
        <div>123</div>

2、label嵌套问题，有时候会遇到label多个嵌套的问题

html

        <input id="test1" type="checkbox"/>
        <input id="test2" type="checkbox">
        <label for="test1">
            <label for="test2">
                123
            </label>
        </label>
        <div>123</div>

注意：这种情况的话，只会触发后面的一层，说白当label标签遇到label时会自动忽略，会不做理会

html（这样的话就是点第一个123会触发test1，第二个123会触发test2）

        <input id="test1" type="checkbox"/>
        <input id="test2" type="checkbox">
        <label for="test1">
            123
            <label for="test2">
                123
            </label>
        </label>
        <div>123</div>

3、多事件问题，可能有人会想要嵌套都是因为需要用到多个事件。目前来看label是做不到的，但是可能有人会想a标签:target加label来实现双事件。

html

        <input id="test1" type="checkbox" />
        <label for="test1">
            123
            <a href="#a">
                123
            </a>
        </label>
        <div>123</div>

注意：其实这样的话就会和第二点是一样的。