一、id选择器
d 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#cdiv{
color :black;
background-color: rgb(252, 55, 0);
text-align: center;
}
</style>
</head>
<body>
<p id = "cdiv">这段文字的背景颜色为红色,并且在中间显示</p>
<p>这段文字正常显示</p>
</body>
</html>
输出结果如下：
注意:id选择器不能以数字开头，原因是在部分浏览器上会引起错误。
二、class选择器
class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在 HTML 中以 class 属性表示, 在 CSS 中，类选择器以一个点 . 号显示：
例如
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.cdiv{
text-align: center;
background-color: brown;
}
</style>
</head>
<body>
<h1 class = "cdiv">标题居中</h1>
</body>
</html>
输出如下
在class中也可以指定特定的元素样式，例如可以使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p.cdiv{
text-align : center;
background-color : brown;
}
</style>
</head>
<body>
<h1 class = "cdiv">这行不受影响</h1>
<p class="cdiv">这行受到影响</p>
</body>
</html>
输出如下
三、 多个选择器可以使用空格隔开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.cdiv{
text-align : center;
background-color : brown;
}
.ddiv{
color :yellow;
}
</style>
</head>
<body>
<p class="cdiv ddiv">11111111</p>
</body>
</html>
四、伪选择器
伪选择器共有四个，分别是
- a:link（链接在未点击时的状态）、
- a:visited（链接访问后的状态）、
- a:hover（将鼠标放置到链接上时链接显示的样式）、
- a:active(active向活动的链接添加特殊的样式。当你点击一个链接时它变成活动链接。)
写不动了，我是屑。
