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>CSS选择符-----伪类选择符
原文地址：https://www.cnblogs.com/fengfuwanliu/p/10180622.html