CSS 选择器 Selectors
Docs
CSS 选择器简介
开发中经常需要找到特定的网页元素进行设置样式
- 思考：如何找到特定的那个元素？
什么是 CSS 选择器
- 按照一定的规则选出符合条件的元素，为之添加 CSS 样式
选择器的种类繁多，大概可以这么归类
- 通用选择器 universal selector
- 元素选择器 type selector
- 类选择器 class selector
- id 选择器 id selector
- 属性选择器 attribute selector
- 组合 combinators
- 伪类 pseudo-classes
- 伪元素 pseudo-elements
简单选择器是开发中用的最多的选择器：
- 元素选择器（type selectors）, 使用元素的名称；
- 类选择器（class selectors）, 使用
.类名； - id 选择器（id selectors）, 使用
#id；
id 注意事项
一个 HTML 文档里面的 id 值唯一的，不能重复
- id 值如果由多个单词组成，单词之间可以用
中划线-、下划线_连接，也可以使用驼峰标识。(中划线又叫连字符（hyphen）) - 最好
不要用标签名作为 id 值
选择器 Selectors
以下是一些选择器的列表，它们允许根据 DOM 内元素的各种特征对样式进行条件限制。
基本选择器
基本选择器是选择器中最初级的，通常由它们的组合构成其他更复杂的选择器。
分组选择器
选择器列表
A, B指定同时选择
A和B元素。这是一种选择多个匹配元素的分组方法。
组合选择器
组合选择器是在两个或多个简单选择器之间建立关系的选择器，例如"A 是 B 的子代"或"A 与 B 相邻"，它们构成了比较复杂的选择器。
相邻兄弟选择器
A + B：指定A和B选择的元素具有相同的父元素，并且B选择的元素在水平方向上紧随A选择的元素。普通兄弟选择器
A ~ B：指定由A和B选择的元素共享相同的父元素，并指定A选择的元素在B选择的元素之前（但不一定紧接在B之前）。子选择器
A > B：指定B选择的元素是A选择的元素的直接子元素。后代选择器
A B：指定B选择的元素是A选择的元素的后代，但不一定是直接子代。列选择器
A || B实验性：指定B选择的元素在A指定的表格列中，跨越多列的元素被认为是所有这些列的成员。