Added pseudo classes to CSS3
:empty Selects an empty label
:focus Selects the form element currently in focus
:enabled Selects the currently valid form elements
:disabled Selects currently invalid form elements
: Checked Selects the checked radio button or check box
:root Selects the root element, the HTML tag
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta "> <title>Document</title> <style>. Para {width:100px; height:100px; border: 1px solid #000; } .para:empty { background-color:red; } input:focus { background-color:red; } input:disabled { border: 1px solid #000; } input:enabled { border: 3px solid #000; } input:checked+span { color:red; } :root { font-size:50px; } </style> </head> <body> <p class="para"></p> <p class="para"></p> <p class="para">123</p> <p class="para"> </p> <p> <input type="text"> <input type="text" disabled> <input type="text" disabled> <input type="text"> </p> <p> <input type="checkbox"><span>ai</span> <input type="checkbox"><span>123</span> <input type="checkbox"><span>456</span> <input type="checkbox"><span>ni</span> </p> </body> </html>Copy the code