目录
伪类选择器
不同元素间使用
状态伪类选择器
伪类选择器
:root{ } 匹配根元素
element:first-child{ } 选择一组相同元素中的第一个元素
element:last-child{ } 选择一组相同元素中的最后一个元素
element:nth-child(n){ } 选择一组相同元素中的第n个元素，n可以是数值、关键词、表达式
偶数：even 或 2n
奇数：odd 或 2n+1
element:nth-last-child(n){ } 选择一组相同元素中的倒数第n个元素，n可以是数值、关键词、表达式<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 匹配根元素 */
:root {
background: yellow;
}
/* 选择一组相同元素中的第一个元素 */
.wrap div:first-child {
background: #f0f;
}
/* 选择一组相同元素中的最后一个元素 */
.wrap div:last-child {
background: tomato;
}
/* 选择一组相同元素中的第n个元素，n可以是数值、关键词、表达式 */
.wrap div:nth-child(3) {
background: orange;
}
/* 奇数：odd 或 2n+1 */
.wrap div:nth-child(odd) {
background: lightblue;
}
/* 偶数：even 或 2n */
.wrap div:nth-child(even) {
background: lightcyan;
}
.wrap div:nth-child(2n) {
background: lightcoral;
}
.wrap div:nth-child(2n+1) {
background: lightgreen;
}
.wrap div {
margin-bottom: 20px;
}
.wrap2 {
height: 100px;
background: goldenrod;
}
.wrap div:nth-child(3n) {
margin-bottom: 0;
}
/* 选择一组相同元素中的倒数第n个元素，n可以是数值、关键词、表达式 */
.wrap div:nth-last-child(2) {
height: 100px;
}
.wrap div:nth-last-child(odd) {
height: 50px;
}
.wrap div:nth-last-child(2n) {
width: 500px;
}
</style>
</head>
<!--
-->
<body>
<div class="wrap">
<div>box1</div>
<div>box2</div>
<div>box3</div>
<div>box4</div>
<div>box5</div>
<div>box6</div>
</div>
</body>
</html>
不同元素间使用
element:nth-of-type(n){ } 一组元素中选择特定类型的元素，n可以是数值、关键词、表达式
element:nth-last-of-type(n){ } 一组元素中选择特定类型的元素，但是需要从最后一个开始计算<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 一组元素中选择特定类型的元素，n可以是数值、关键词、表达式 */
.wrap div:nth-of-type(1) {
background: red;
}
.wrap div:nth-of-type(3) {
background: pink;
}
.wrap p:nth-of-type(2) {
background: tomato;
}
.wrap div:nth-of-type(odd) {
background: lightblue;
}
.wrap div:nth-of-type(2n) {
background: lightsalmon;
}
/* 一组元素中选择特定类型的元素，但是需要从最后一个开始计算 */
.wrap div:nth-last-of-type(1) {
background: blue;
}
.wrap div:nth-last-of-type(2n) {
background: lightgoldenrodyellow;
}
</style>
</head>
<body>
<div class="wrap">
<h2>title</h2>
<div>box1</div>
<div>box2</div>
<h3>title</h3>
<p>段落内容1</p>
<p>段落内容2</p>
<div>box3</div>
<div>box4</div>
<div>box5</div>
<div>box6</div>
</div>
</body>
</html>
状态伪类选择器
element:checked{ } 选择页面中处于选中状态的element元素
element:disabled{ } 选择页面中处于禁用状态的element元素
element:enabled{ } 选择页面中处于可用状态的element元素<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 选择页面中处于选中状态的element元素 */
.for input[type=radio]:checked{
background: red;
}
/* 选择页面中处于禁用状态的element元素 */
.for input[type=text]:disabled{
background: pink;
}
/* 选择页面中处于可用状态的element元素 */
.for input:enabled{
background: blue;
}
</style>
</head>
<!--
-->
<body>
<form class="for" action="#">
<div><input type="text" placeholder="请输入用户名"></div>
<div><input type="text" placeholder="请输入曾用名" disabled></div>
<div><label><input type="radio" name="sex"> 男</label></div>
<div><label><input type="radio" name="sex" checked> 女</label></div>
</form>
</body>
</html>
