Element:hover
E:hover { sRules } 设置元素在其鼠标悬停时的样式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> h1 { font-size: 16px; } a, div { display: block; margin-top: 10px; padding: 10px; border: 1px solid #ddd; } a:hover { display: block; background: #ddd; color: #f00; } div:hover { background: #ddd; color: #f00; } </style> </head> <body> <h1>请将鼠标分别移动到下面2个元素上</h1> <a href="?">我是一个a</a> <div>我是一个div</div> </body> </html>
Element:focus
E:focus { sRules } 设置对象在成为输入焦点（该对象的onfocus事件发生）时的样式，webkit内核浏览器会默认给:focus状态的元素加上outline的样式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> h1 { font-size: 16px; } ul { list-style: none; margin: 0; padding: 0; } input:focus { background: #f6f6f6; color: #f60; border: 1px solid #f60; outline: none; } </style> </head> <body> <h1>请聚焦到以下输入框</h1> <form action="#"> <ul> <li><input value="姓名" /></li> <li><input value="单位" /></li> <li><input value="年龄" /></li> <li><input value="职业" /></li> </ul> </form> </body> </html>
Element:checked
E:checked { sRules } 匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> input:checked+span { background: #f00; } input:checked+span:after { content: " 我被选中了"; } </style> </head> <body> <form method="post" action="#"> <fieldset> <legend>选中下面的项试试</legend> <ul> <li><label><input type="radio" name="colour-group" value="0" /><span>蓝色</span></label></li> <li><label><input type="radio" name="colour-group" value="1" /><span>红色</span></label></li> <li><label><input type="radio" name="colour-group" value="2" /><span>黑色</span></label></li> </ul> </fieldset> <fieldset> <legend>选中下面的项试试</legend> <ul> <li><label><input type="checkbox" name="colour-group2" value="0" /><span>蓝色</span></label></li> <li><label><input type="checkbox" name="colour-group2" value="1" /><span>红色</span></label></li> <li><label><input type="checkbox" name="colour-group2" value="2" /><span>黑色</span></label></li> </ul> </fieldset> </form> </body> </html>
Element:enabled和Element:disabled
E:enabled { sRules } 匹配用户界面上处于可用状态的元素E
E:disabled { sRules } 匹配用户界面上处于禁用状态的元素E
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> li { padding: 3px; } input[type="text"]:enabled { border: 1px solid #090; background: #fff; color: #000; } input[type="text"]:disabled { border: 1px solid #ccc; background: #eee; color: #ccc; } </style> </head> <body> <form method="post" action="#"> <fieldset> <legend>E:enabled与E:disabled</legend> <ul> <li><input type="text" value="可用状态" /></li> <li><input type="text" value="可用状态" /></li> <li><input type="text" value="禁用状态" disabled="disabled" /></li> <li><input type="text" value="禁用状态" disabled="disabled" /></li> </ul> </fieldset> </form> </body> </html>