在CSS中，选择器是一种模式，用于选择需要添加样式的元素。
CSS选择器种类很多，可以自由组合，基本上每个一位置的标签都能通过CSS选择器来定位。
一、以下示例展现了ID选择器、后代选择器、相邻选择器、类选择器的使用效果。
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用选择器演示</title>
<style>
div {
width:500px;
height:300px;
background-color:black;
}
div p {
background-color:lightblue;
}
#first_P_Label {
background-color:lightcoral;
}
.first_Class_Label {
background-color:lightgreen;
}
p:nth-of-type(4) + li {
background-color:yellow;
}
</style>
</head>
<body>
<div>
<p>第一个子元素：被后代选择器（标签选择器）选中的</p>
<p>----------------</p>
<p id="first_P_Label">第三个子元素：被ID选择器选中的</p>
<p>----------------</p>
<li>第五个子元素：相邻选择器选中的</li>
<p>----------------</p>
<p class="first_Class_Label">第七个子元素：被类选择器选中的</p>
<p>----------------</p>
<p class="first_Class_Label">第九个子元素：被类选择器选中的</p>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
二、以下示例展现了伪类选择器的使用效果以及nth-of-type和nth-child的区别。
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用选择器2</title>
<style>
/*选择div中的第三个子元素*/
div :nth-child(3) {
background-color:lightblue;
}
/*选择div中的p元素的第三个子元素*/
div p:nth-of-type(3) {
background-color: blueviolet;
}
/*选择所有p元素中的第一个*/
p:nth-child(1) {
background-color:lightblue;
}
/*选择所有li元素中的第二个*/
li:nth-of-type(2) {
background-color: blueviolet;
}
</style>
</head>
<body>
<div>
<p>1-P01</p>
<p>2-P02</p>
<li>3-LI01</li>
<li>4-LI02</li>
<p>5-P03</p>
<li>6-LI03</li>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
三、以下示例展现了表单选择器的使用效果。
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用选择器3</title>
<style>
/*当表单元素可用时背景设置成绿色*/
form :enabled {
background-color: lightgoldenrodyellow;
}
/* 使用伪类和相邻选择器组合将单选按钮中的文本设置为红色 */
form :checked + label {
color: red;
}
/*在控件中输入无效值文本自动变成红色 */
form :invalid {
color: red;
}
/*获取到焦点时, 背景变成绿色*/
form :focus {
background-color: lightgreen;
}
/* 使用伪类设置鼠标悬停时的样式 */
button:hover {
width: 56px;
height: 28px;
background-color: mediumpurple;
color: white;
}
</style>
</head>
<body>
<form action="">
<label for="email">邮箱:</label>
<input type="email">
<br>
<label for="password">密码:</label>
<input type="password">
<br>
<input type="radio" id="week" name="save" value="7" checked>
<label for="week">使用验证码</label>
<br>
<input type="radio" id="month" name="save" value="30">
<label for="month">使用密码</label>
<br>
<button>登录</button>
</form>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
伪类选择器中，nth-of-type和nth-child的区别在于关注的重点不同。
1、在不指定类型时，
:nth-child(n)选中的是父元素下的第N个子元素。
:nth-of-type(n)选中的是父元素下的不同类型标签“各自”的第N个。
2、在指定类型时，
element:nth-child(n)要求的不仅仅是第n个子元素，并且这个子元素的标签是element。
element:nth-of-type(n)选择的是父元素下element标签的第n个。