經過我的分析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>

注意：其實這樣的話就會和第二點是一樣的。