Focus state

:focus
: focus selector select the currently focused element

<div>
   <button>btn1</button>
   <button>btn2</button>
   <button>btn3</button>
</div>
<script>    
document.onclick = function(){
    $(':focus').css('color','red');
}
</script>

Corresponding to CSS selector: focus

:focus{color:red}

If you use javascript to achieve similar effects

var tags = document.getElementsByTagName('*');
for(var i = 0; i < tags.length; i++){
    tags[i].onfocus = function(){
        this.style.color = 'red';
    }
}

Hash state

:target
The: target selector is used to match the target element corresponding to the anchor

<div>
    <a href="#test">Anchor point</a>
    <div id="test">Discoloration</div>
</div>
<script>
window.location = '#test';
$(':target').css('color','red');
</script>

The corresponding CSS selector is: target selector, which is used to match the target element corresponding to the anchor

:target{color:red;}

Animation status

:animated
: animated selector selects all elements that are performing animation effects

<button id="btn">run</button>
<div id="mover" style="height:30px;width: 30px;background-color: green;"></div>
<script>
function animateIt() {
  $("#mover").slideToggle("slow", animateIt);
}
animateIt();
btn.onclick = function(){
     $("div:animated").css('background-color','red');
}
</script>

Explicit and implicit state

:hidden
: Hidden selector selects all hidden elements and returns collection elements
hide
Invisible elements are not hidden. Elements are considered hidden in the following ways:

　　[1]display:none

[2] type of form element = 'hidden'

[3] width and height are set to 0

[4] ancestral elements are hidden

[note] the element visibility: hidden or opacity: 0 is considered visible because they still occupy the layout space

:visible
The: visible selector selects all visible elements, which are considered visible if they occupy a certain space in the document

[note] animating on hidden elements is considered visible until the end of the animation

<button id="btn1">$('#test :hidden')</button>
<button id="btn2">$('#test :visible')</button>
<button id="reset">reduction</button>
<div id="test">
    <div>
        <div style="display:none;">hidden</div>  
        <div>visible</div> 
    </div>
    <form>
        <input type="hidden" />
        <input/>
    </form>   
</div>
<script>
reset.onclick = function(){history.go();}
btn1.onclick = function(){this.innerHTML = 'Yes'+$('#test :hidden').length+'Hidden elements'}
btn2.onclick = function(){this.innerHTML = 'Yes'+$('#test :visible').length+'Visible elements'}
</script>