# CSS
- ## css选择器
- 根据标签名选择
```css
h1,p,li {
color:red;
}
```
- 根据class进行选择
- 通过class属性来进行选择
```css
.disk-block {
border:1px black dashed;
}
```
- 通过标签名和class同时来进行选择
```css
li.pink-css,div.pink-css {
color:pink;
}
```
- 后代选择器
- 后代选择其会根据标签的位置来进行选择,多个标签之间通过空格隔开
```css
li em {
font-style: italic;
}
li span.pink-style {
color:pink;
}
```
- 相邻兄弟选择器
- 相邻兄弟选择器会选择其相邻的下一个兄弟节点
```css
li + li {
color:red;
}
```
- 子选择器
- 相比与后代选择器，子选择器只会选择其节点的直接后代，间接的后代不会被选中
```css
li > em {
color:pink;
}
```
- ## css使用方法
- 引用外部css文件
```html
```
- 内部样式
```html
```
- 内联样式
```html
Hello
```
- ## 多条样式规则应用于同一个元素
- 多个样式规则的选择器范围相同
- 在选择其范围相同的情况下，后出现的选择器样式会覆盖先前出现的选择器样式
```css
p {
color:red;
}
p {
color:blue;
}
/* 后出现的p样式会覆盖之前出现的p样式，最终颜色为blue */
```
- 多个样式规则的选择器范围不同
- 如果多个样式的选择器范围不同，那么范围更小更特殊的选择器样式胜出
```css
.red-p {
color:red;
}
p {
color:blue
}
/* 此时类选择器比元素选择器更特殊，故而最终颜色为red */
```
- 在同一个选择器中重复指定样式
- 在同一选择器中重复指定样式，位于后面的样式会覆盖位于前面的样式
```css
p {
color:blue;
color:red;
}
```