index.html
?
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>CSS选择器[下]</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <ul> <li>我是儿子</li> <li>我是儿子</li> <li>我是儿子</li> <li>我是儿子</li> </ul> <ul> <li>我是儿子</li> </ul> <div> <p>我是段落</p> <span>我不是段落</span> </div> <div> <p>我是段落</p> <p>我是段落</p> </div> <form> <input type="text" required> <input type="email"> <input type="checkbox"> <input type="checkbox" checked> <button>提交</button> </form> <a href="http://www.baidu.com">百度</a> <a href="http://www.google.com">谷歌</a> <a href="http://www.haosou.com">好搜</a> <b>加粗</b> <p lang="en-us">HTML5</p> <b id="mytarget">加粗</b> </body> </html>
?
style.css
@charset "utf-8";
/*:root {
border: 1px solid red;
}*/
/*ul > li {
color: red;
}*/
/*ul > li:first-child {
color: red;
}*/
/*li:first-child {
color: red;
}*/
/*:first-child {
color: red;
}*/
/*伪类都需要加上前置选择器来限制范围*/
/*ul > li:last-child {
color: red;
}*/
/*ul > li:only-child {
color: red;
}*/
/*div > p:only-child {
color: red;
}*/
/*div > p:only-of-type {
color: red;
}*/
/*ul > li:nth-child(2) {
color: red;
}*/
/*ul > li:nth-last-child(2) {
color: red;
}*/
/*div > p:nth-of-type(2) {
color: red;
}*/
/*div > p:nth-last-of-type(1) {
color: red;
}*/
/*input:enabled {
border: 1px solid red;
}
input:disabled {
border: 1px solid blue;
}*/
/*input:checked {
display: none;
}*/
/*input:default {
display: none;
}*/
/*input:valid {
border: 1px solid green;
}
input:invalid {
border: 1px solid red;
}*/
/*input:required {
border: 1px solid red;
}
input:optional {
border: 1px solid blue;
}*/
/*a:link {
color: red;
}
a:visited {
color: blue;
}
a:hover {
color: orange;
}
a:active {
color: green;
}*/
/*input:focus {
border: 1px solid red;
}*/
/*a:not([href*="baidu"]) {
color: red;
}*/
/*p:empty {
display:none;
}*/
/*p:lang(en) {
color: red;
}*/
b:target {
color: red;
}
::selection {
color: red;
}
?
?
原文：http://onestopweb.iteye.com/blog/2231006