?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>选择器E:hover、E:active和E:focus</title>
<style>
/*
:hover 选择器用于选择鼠标指针浮动在上面的元素。
:focus 选择器用于选取获得焦点的元素。
:active 选择器用于选择活动链接。
*/
input[type="text"]:hover{ background:#0F3;}
input[type="text"]:focus{ background:#f60;}
input[type="text"]:active{ background:#FF0;}
input[type="password"]:hover{ background:#c00;}
</style>
</head>
<body>
<h1>选择器E:hover、E:active和E:focus</h1>
<form>
<!--placeholder 属性提供可描述输入字段预期值的提示信息（hint）。
该提示会在输入字段为空时显示，并会在字段获得焦点时消失。-->
姓名：<input type="text" placeholder="请输入姓名">
<br/>
<br/>
密码：<input type="password" placeholder="请输入密码">
</form>
</body>
</html>
?效果图：
?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>E:enabled伪类选择器与E:disabled伪类选择器</title>
<style>
/*
:enabled 选择器匹配每个已启用的元素（大多用在表单元素上）。
:disabled 选择器匹配每个被禁用的元素（大多用在表单元素上）。
*/
input[type="text"]:enabled{ background:#F60; color:#fff;}
input[type="text"]:disabled{ background:#CF3;}
</style>
</head>
<body>
<h1>E:enabled伪类选择器与E:disabled伪类选择器</h1>
<form>
姓名：<input type="text" placeholder="请输入姓名" disabled>
<br/>
<br/>
网站：<input type="text" placeholder="请输入网站">
</form>
</body>
</html>
?效果图：
?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>read-only伪类选择器与E:read-write伪类选择器</title>
<style>
/*
E: read-only伪类选择器用来指定当元素处于只读状态时的样式。
E: read-write伪类选择器用来指定当元素处于非只读状态时的样式。
只能在谷歌内核上看，或少数内核上可以看，不建议使用
*/
input[type="text"]:read-only{ background:#000; color:#fff;}
input[type="text"]:read-write{ background:#f60;}
</style>
</head>
<body>
<h1>read-only伪类选择器与E:read-write伪类选择器</h1>
<form>
姓名：<input type="text" placeholder="请输入姓名" value="吴者然" readonly>
<br/>
<br/>
网站：<input type="text" placeholder="请输入网站">
</form>
</body>
</html>
?效果图：
?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>伪类选择器</title>
<style>
/*
:checked 选择器匹配每个已被选中的 input 元素（只用于单选按钮和复选框）。
:default 不建议使用
*/
input[type="checkbox"]:checked{ outline:2px solid #0F0;}
input[type="checkbox"]:default{ outline:2px solid #0F0;}
</style>
</head>
<body>
<h1>伪类选择器</h1>
<form>
房屋状态：
<input type="checkbox" checked>水
<input type="checkbox">电
<input type="checkbox">气
<input type="checkbox">光纤
</form>
</body>
</html>
?效果图：
?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>伪类选择器E::selection</title>
<style>
/*
IE9+、Opera、Google Chrome 以及 Safari 中支持 ::selection 选择器。
Firefox 支持替代的 ::-moz-selection。
::selection 选择器匹配被用户选取的选取是部分。
只能向 ::selection 选择器应用少量 CSS 属性：color、background、cursor 以及 outline。
*/
::selection{ background: green; color: #ffffff;}
::-moz-selection{ background: green; color: #ffffff;}
input[type="text"]::selection{ background: green; color: #ffffff;}
input[type="text"]:-moz-selection{ background: green; color: #ffffff;}
</style>
</head>
<body>
<h1>伪类选择器E::selection</h1>
<p>阅谁问君诵，水落清香浮。</p>
<input type="text" placeholder="文本">
</body>
</html>
效果图：
?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>E:invalid伪类选择器与E:valid伪类选择器</title>
<style>
/*
:invalid 选择器用于在表单元素中的值是非法时设置指定样式。
:valid 选择器在表单元素的值需要根据指定条件验证时设置指定样式。
*/
input[type="email"]:invalid{ color: red;}
input[type="email"]:valid{color: green;}
</style>
</head>
<body>
<h1>E:invalid伪类选择器与E:valid伪类选择器</h1>
<form>
<input type="email" placeholder="请输入邮箱">
</form>
</body>
</html>
效果图：
?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>E:required伪类选择器与E:optional伪类选择器</title>
<style>
/*
E:required伪类选择器用来指定允许使用required属性，且已经指定了required属性的input元素、select元素以及textarea元素的样式。
E:optional伪类选择器用来指定允许使用required属性，且未指定required属性的input元素、select元素以及textarea元素的样式。
*/
input[type="text"]:required{ background:red; color:#fff;}
input[type="text"]:optional{ background:green; color:#fff;}
</style>
</head>
<body>
<h1>E:required伪类选择器与E:optional伪类选择器</h1>
<form>
<!--required 属性规定必需在提交之前填写输入字段。-->
姓名：<input type="text" placeholder="请输入姓名" required>
<br/>
<br/>
网址：<input type="text" placeholder="请输入网址">
</form>
</body>
</html>
效果图：
?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>E:in-range伪类选择器与E:out-of-range伪类选择器</title>
<style>
/*
E:in-range伪类选择器用来指定当元素的有效值被限定在一段范围之内（通常通过min属性值与max属性值来限定），且实际输入值在该范围内时使用的样式。
E:out-of-range伪类选择器用来指定当元素的有效值被限定在一段范围之内（通常通过min属性值与max属性值来限定），但实际输入值在该范围之外时使用的样式。
*/
input[type="number"]:in-range{ color:#fff; background:green;}
input[type="number"]:out-of-range{ color:#fff; background:red;}
</style>
</head>
<body>
<h1>E:in-range伪类选择器与E:out-of-range伪类选择器</h1>
<input type="number" min="0" max="100" value="0">
</body>
</html>
效果图：
?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
span~p{ background:#f60;}
</style>
</head>
<body>
<div>
<span>韵茶</span>
<span>韵茶</span>
<p>阅谁问君诵，水落清香浮</p>
<p>阅谁问君诵，水落清香浮</p>
</div>
<span>韵茶<p>阅谁问君诵，水落清香浮</p></span>
<p>阅谁问君诵，水落清香浮</p>
<p>阅谁问君诵，水落清香浮</p>
<div>
<p>阅谁问君诵，水落清香浮</p>
<p>阅谁问君诵，水落清香浮</p>
</div>
<p>阅谁问君诵，水落清香浮</p>
<p>阅谁问君诵，水落清香浮</p>
</body>
</html>
?效果图：
?
?
?
原文：http://onestopweb.iteye.com/blog/2262510