第13章 CSS选择器[下]

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

第13章 CSS选择器[下]

猜你喜欢