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;
}