- :link
- :visited
- :hover
- :active
- :focus
- :first-child
- :last-child
- :nth-child()
- :nth-last-child()
- :nth-of-type()
- :nth-last-of-type()
- :not()
- :required 必填
- :optional 选填
- :valid 有效
- :invalid 无效
- :in-range 在范围内
- :out-of-range 超出范围
:not 伪类不参与权重计算
http://jsbin.com/erimuh/1/edit
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> /* love hate顺序 */ a:link { color: #000; } a:visited { color: #ddd; } a:hover { color: #f00; } a:active { color: #0f0; } input:focus { /* IE6IE7不支持 */ border: 1px solid #f00; } p { width: 10em; } p:first-letter { color: #f00; } p:first-line { color: #0f0; } li:first-child { /* IE6不支持 */ background-color: #ff0; } /* * :first * :left * :right * :lang */ </style> </head> <body> <ul> <li><a href="http://www.baomihua.com/" target="_blank">1</a></li> <li><a href="http://app.baomihua.com/" target="_blank">2</a></li> <li><a href="http://show.baomihua.com/" target="_blank">3</a></li> </ul> <input type="text" /> <p>如果丘处机没有路过牛家村，中国将是最发达国家</p> </body> </html>
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> li:nth-child(odd) { color: #0f0; } li:nth-child(even) { color: #f00; } li:nth-child(2) { background-color: #ddd; } li:nth-child(2n+1) { background-color: #999; } li:nth-last-child(3) { background-color: #ff0; } li.item:nth-of-type(n+3) { /* 从第三个匹配li开始，选取每一个类名为item的列表项 */ font-size: 60px; } li:not(.item) { margin-left: 20px; } </style> </head> <body> <ul> <li>1</li> <li class="item">2</li> <li>3</li> <li class="item">4</li> <li class="item">5</li> <li class="item">6</li> <li>7</li> <li>8</li> </ul> </body> </html>