伪类选择器：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charest="utf-8">
<title>伪类选择器举例</title>
<style>
p:first-letter:{
font-weight:bold;
color:#43193c;
margin-right:15px;
margin-bottom:15px;
font-size:18px;
}
p:first-line{
font-weight:bold;
color:yellow;
}
p:selection{
color:yellow;
background-color:#000
}
</style>
<body>
<p>这是一段p元素，xxx<br>这是另外一段p元素</p>
</body>
</html>
</head>
兄弟选择器：
<!DOCTYPE html>
<html></html>
<head lange="en">
<meta charset="utf-8">
<title>兄弟选择器</title>
<style>
/*#p1+p{color:red;}*/
/*p+p{color:blue;}*/
#p1~#p2{
color:orange
}
</style>
</head>
<body>
<p id="p1"> 第一个p元素 <p>
<p id="p2">第二个p元素<p>
<p id="p3">第三个p元素<p>
</body>
</html>
元素状态伪类：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charest="utf-8">
<title>元素状态伪类</title>
<style>
input:enabled{
color:green;
}
input:disabled{
color:red;
}
input:checked{
background-color:red;
}
</style>
</head>
<body>
<p>
用户名称：<input value="请输入用户名称" disabled>
</p>
<p>
用户密码：<input type="passward" value="">
</p>
<p>
用户性别：<input type="radio" name="rdo" value="0">男
<input type="radio" name="rdo" value="1">女
</p>
</body>
</html>