使用css
- 通过外部文件引入
- 直接使用style标签
- 内联样式
选择器
如果要同时选择多个选择器，可以用逗号隔开，例如：
h1, .special { color: blue; }
如果其中有一个选择器有语法错误，那么会导致整个样式都不生效
类型、类、ID选择器
类型选择器
使用标签名作为选择器
全局选择器
选中所有的样式 使用* 通常用于重置样式
类选择器
用 . 开头，需要在元素中用class来定义类名选中
使用 类型.class这种形式可以指定某一个元素的样式
在定义元素的class的时候也可以定义多个，这样我们在选中的时候也必须指定多个类才能使样式生效，可以理解为父子类
ID选择器
用 #开头，用法和类选择器基本相似，但是一个ID只能用一次，即ID是唯一的，在标签中使用id属性指定
属性选择器
以 标签名+[]的形式来使用
例如：li[class = “a”] 匹配class属性为a的选项，精准匹配
li[class ~= “a”] 模糊匹配包含a
li[class |= “a”] 模糊匹配以a开头
同理还有：^匹配开头 $匹配结尾 *匹配任何包含
如果想要让他大小写不敏感的匹配的话，
需要在括号结尾加上一个i 例如:li[class^=“a” i]
伪类和伪元素
开头为 ：的关键字是伪类
简单来说就是在进行交互操作的时候相当于给标签加上了样式
- :active：表示元素被活动激活时的状态，比如用户点击一个按钮时。
- :visited：表示已经访问过的链接，可以用来改变链接的颜色。
- :focus：表示当前拥有焦点的元素，通常用于表单元素和链接。
- :nth-child(n)：表示选中父元素下第n个子元素，可以通过这个伪类来实现斑马线效果等。
- :hover 鼠标悬停
开头为::是伪元素，可以对元素本身来进行修改和增强
后代选择器
使用空格隔开的多个选择器，具有层级递进关系
例如：.box p 他就只匹配 class = .box中的
标签的元素
子代关系选择器
子代关系选择器是个大于号（>），只会在选择器选中直接子元素的时候匹配。继承关系上更远的后代则不会匹配。例如，只选中作为
的直接子元素的
元素：
article > p
邻接兄弟选择器
邻接兄弟选择器（+）用来选中恰好处于另一个在继承关系上同级的元素旁边的物件。例如，选中所有紧随
元素之后的元素：
p + img
通用兄弟
如果你想选中一个元素的兄弟元素，即使它们不直接相邻，你还是可以使用通用兄弟关系选择器（~）。要选中所有的
元素后_任何地方_的元素，我们会这样做：
p ~ img
