选择器

# 选择器

type 选择器 - 根据标签名进行匹配（元素选择器）
class 选择器 - 根据元素的 class 属性进行匹配

.
id 选择器 - 根据元素的 id 属性进行匹配

#

# 案例

css.html

<!DOCTYPE html>
<html lang="zh">
<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>CSS示例</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <p id="p1">1111111111111111111</p>
    <p class="c1" id="p2">2222222222222222222</p>
    <p class="c1" id="p3">3333333333333333333</p>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

style.css

/* 元素(type)选择器 */
p {
    background-color:rgb(243, 136, 42);
}

/* class 选择器 */
.c1 {
    background-color: rgb(151, 211, 48);
}

/* id 选择器 */
#p3 {
    background-color: cyan;
    display: block;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

布局→