【前端笔记】CSS 选择器的常见用法
目录
- 1. CSS 的基本语法规范
- 2. CSS 的引入方式
- 3. CSS 选择器的种类
- 3.1 标签选择器
- 3.2 类选择器
- 3.3 id 选择器
- 3.4 复合选择器
- 3.5 通配符选择器
- 4. 补充内容
1. CSS 的基本语法规范
选择器 + {1 条 / n 条声明}
- 选择器决定的是修改谁
- 声明决定的是怎么修改
- 声明的属性是键值对，使用 ; 区分键值对，使用 : 区分键和值
2. CSS 的引入方式
| 引入方式 | 描述 |
|---|---|
| 行内样式 | 在标签内使用 style 属性 |
| 内部样式 | 一般在 HTML 的 head 标签中定义 style 标签，在标签内部定义 css 样式 |
| 外部样式（常用） | 一般在 HTML 的 head 标签中定义 link 标签，通过 href 属性引入 css 外部文件 |
行内样式：
内部样式：
外部样式：
css.css 文件：
3. CSS 选择器的种类
3.1 标签选择器
在 head 标签中定义 style 标签，含义为将选中的标签全部更改为自己所定义的样式；
代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>css选择器</title><style>/* 1. 标签选择器 *//* 将全部 div 标签改为红色，p 标签改为蓝色，h1 标签改为绿色 */div {color: red;}p {color: blue;}h1 {color: green;}</style>
</head>
<body><h1>一级标题</h1><div>我是div1</div><div>我是div2</div><p>我是p标签1</p><p>我是p标签2</p>
</body>
</html>
代码运行结果：
3.2 类选择器
这个类的意思和 Java 中的类概念不同，这里表示一类、分类；
在标签后加入 class 属性对标签进行分类更改样式；
类选择器前边要加点（.）；
代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>css选择器</title><style>/* 2. 类选择器 *//* 将 red 类改为红色，将 green 类改为绿色 */.red {color: red;}.green {color: green;}</style>
</head>
<body><h1>一级标题</h1><div class="red">我是div1</div><divc class="green">我是div2</div><p class="red">我是p标签1</p><p class="green">我是p标签2</p>
</body>
</html>
代码运行结果：按不同类进行了颜色的更改
3.3 id 选择器
在上述代码的基础上，如果想对p标签1再进行颜色更改，可以加如 id 属性；
代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>css选择器</title><style>.red {color: red;}.green {color: green;}/* 3. id选择器 *//* 将id="p1"的标签改为棕色 */#p1 {color: brown;}</style>
</head>
<body><h1>一级标题</h1><div class="red">我是div1</div><divc class="green">我是div2</div><p class="red" id="p1">我是p标签1</p><p class="green">我是p标签2</p>
</body>
</html>
代码运行结果：
3.4 复合选择器
复合选择器就是由多个单选择器组成；
代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 4. 复合选择器 *//* 表示只更改li标签下的a标签 */li a {color: red;}/* 表示只更改id为middle标签下的li标签 */#middle li {color: red;}/* 表示只更改ul标签下li标签的a标签 */ul li a {color: green;}/* 表示只更改ol标签下li标签的a标签 */ol li a {color: pink;}/* 表示将id为a1,a2的标签一并修改 */#a1, #a2 {color: pink;}/* 等价于ul li a {} 写法*/ul>li>a {color: red;}</style>
</head>
<body><div class="font32">我是一个div, class为font32</div><div class="font32">我是一个div, class为font32</div><div><a href="#">我是一个div</a></div><ul><li>aaa</li><li>bbb</li><li><a href="#" id="a1">ccc</a></li></ul><ol id="middle"><li>1111</li><li>2222</li><li>3333</li></ol><ol><li>1111</li><li>2222</li><li><a href="#" id="a2">3333</a></li></ol><button id="submit">提交</button>
</body>
</html>
运行结果这里不做展示
3.5 通配符选择器
代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 5. 通配符选择器 *//* 将所有标签改为绿色，字体改为40像素 */* {color: green;font-size: 40px;}</style>
</head>
<body><div class="font32">我是一个div, class为font32</div><div><a href="#">我是一个div</a></div><ul><li>aaa</li><li>bbb</li><li><a href="#" id="a1">ccc</a></li></ul><ol><li>1111</li><li>2222</li></ol><button id="submit">提交</button>
</body>
</html>
运行结果：
4. 补充内容
- 当指定样式存在多处定义时，一般遵循就近原则，谁离得近就是谁的设计样式；
- 当一个标签中 class 和 id 同时定义了相同属性的不同参数时， id 的样式生效；
- 上文代码中
ul a {}，ul 下面的标签，a 不需要紧挨着 ul，a 是 ul 的子孙即可；ul>li>a {}ul 下面的标签，li 必须要紧挨着 ul，a 必须要紧挨着 li，必须是父子关系； - 颜色 color 表示有三种，英文单词、RGB、十六进制，一般使用后两种，表示的颜色范围更广；