<!DOCTYPE html> <html> <head> <meta charset="utf-8" > <title>css选择器</title> <style type="text/css"> /* HTML 文档css :root{ border: solid 1px red ; }; */ /*字选择器 带>号 也可以不用带*/ /*ul > li{ color: red; }*/ /*ul > li:first-child{ color: red; } ul > li:last-child{ color: red; } */ /*输入框的启用和禁止输入的CSS*/ /*input:enabled{ border: 1px solid red; } input:disabled{ border: 1px solid blue; }*/ /*验证成功就显示blue,验证不成功显示green*/ /*input:valid{ border: 1px solid blue; } input:invalid{ border: 1px solid green; }*/ /*必填表单 和 不必填表单*/ /*input:required{ } input:optional{ }*/ /*1. 显示 2.访问过后的显示 3.鼠标移动 4.点击不动后的显示*/ /*a:link{ } a:visited{ } a:hover{ } a:active{ }*/ /*获取光标时 谷歌不兼容*/ /*input:focus{ border: 1px solid red; }*/ /*a标签 href!=baidu 的a元素*/ /*a:not([href*="baidu"]){ color: red; }*/ /*em是相对的 跟字号大小挂钩,很灵活*/ p{ margin: 0; padding: 0; background: gray; font-size: 20px; width: 50%; } </style> </head> <body> <ul> <li>ul第1个子元素</li> <li>ul第2个子元素</li> <li>ul第3个子元素</li> <li>ul第4个子元素</li> </ul> <input type="text" /> <input type="email" /> <br/> <a href="http:www.baidu.com" >baidu</a> <a href="http:www.google.com" >google</a> <a href="http:www.haosou.com" >haosou</a> <p>em单位的讲解 em单位的讲解em单位的讲解em单位的讲解em单位的讲解 </p> </body> </html>
原文：http://www.cnblogs.com/shaoshao/p/4641261.html