概述：用来选择 HTML 元素并且为其添加样式的一种机制，可以根据标签名、类名、ID、属性>等来选择元素，并为其设置样式。
格式
选择器{
属性名1:属性值1;
...
属性名n:属性值n
}
每一对属性需要使用 “:” 隔开，最后一对属性可以不加 “:”
概述：选择具体的 id 属性值的元素，建议在 一个 html 页面中 id 值唯一
语法
# id属性值{
属性:属性值;
}
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ID选择器</title>
<style>
#in{
background: aquamarine;
}
</style>
</head>
<body>
<input type="text" id="in">
</body>
</html>
概述：选择具有相同标签名称的元素
语法
标签名称{
属性:属性值;
}
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素选择器</title>
<style>
p{
color: red;
}
</style>
</head>
<body>
<p>你好，世界！</p>
<label for="user">用户名：</label>
<input type="text" id="user">
</body>
</html>
概述：选择具有相同的 class 属性值的元素
语法
.class属性值{
属性:属性值;
}
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>类选择器</title>
<style>
.button{
color: red;
}
</style>
</head>
<body>
<p>你好，世界！</p>
<label for="user">用户名：</label>
<input type="text" id="user">
<input type="button" value="提交" class="button">
</body>
</html>
注意：优先级排序（从低到高）：元素选择器、类选择器、id选择器
语法
*{
属性:属性值;
}
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择所有元素选择器</title>
<style>
*{
color: red;
}
</style>
</head>
<body>
<p>你好，世界！</p>
<label for="user">用户名：</label>
<input type="text" id="user">
<input type="button" value="提交" class="button">
</body>
</html>
语法
选择器1,选择器2{
属性:属性值;
}
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>并集选择器</title>
<style>
/*class值为button和标签为p的字体设置为红色*/
.button,p{
color: red;
}
</style>
</head>
<body>
<p>你好，世界！</p>
<label for="user">用户名：</label>
<input type="text" id="user">
<input type="button" value="提交" class="button">
</body>
</html>
作用：找到选择器1元素下面的选择器2元素
语法
选择器1 选择器2{
属性:属性值;
}
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
<style>
/*选择table标签下的 tr 标签*/
table tr{
background: yellowgreen;
}
</style>
</head>
<body>
<table border="1" align="center">
<tr>
<td>语文</td>
<td>数学</td>
<td>英语</td>
</tr>
<tr>
<td>java</td>
<td>python</td>
<td>c</td>
</tr>
</table>
</body>
</html>
作用：找到选择器1下的子选择器2
语法
选择器1>选择器2{
属性:属性值;
}
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子选择器</title>
<style>
/*选择p标签的子标签a*/
p>a{
color: yellowgreen;
}
</style>
</head>
<body>
<p>
你好！
<a href="http://www.baidu.com">百度</a>
<input type="text" id="user">
</p>
</body>
</html>
作用：选择元素名称，属性名=属性值的元素
语法
元素名称[属性名='属性值']{
属性:属性值;
}
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
input[type='text']{
color: yellowgreen;
}
</style>
</head>
<body>
<p>
你好！
<a href="http://www.baidu.com">百度</a>
<input type="text" id="user" placeholder="请输入用户名">
</p>
</body>
</html>
作用：选择处于特定状态的元素或者特定位置的元素。
语法
元素:状态{
属性:属性值;
}
种类：:hover、:active、:focus、:first-child、:last-child、:nth-child等
案例一：要为鼠标悬停在元素上时改变其样式，可以使用 :hover 伪类选择器
a:hover{
color:red;
}
案例二：要为元素被点击时改变其样式，可以使用 :active 伪类选择器
button:active{
background-color:#f00;
}
案例三：要为获得焦点的元素改变其样式，可以使用 :focus 伪类选择器
input:focus{
border:2px solid blue;
}
案例四：要选择第一个子元素，可以使用 :first-child 伪类选择器
li:first-child{
font-weight:bold;
}
案例五：要选择最后一个元素，可以使用 :last-child 伪类选择器
li:last-child{
color:#f00;
}
案例六：要选择特定位置的子元素，可以使用 :nth-child 伪类选择器
li:nth-child(odd) {
background-color: #f2f2f2;
}