CSS选择器
作用：CSS选择器主要用来对网页中的元素进行设置样式
###CSS选择器的规范写法
标签名{ }
类选择器
作用：根据元素的class值进行选取元素
####语法
.className { }
ID选择器
作用：根据元素的id属性值选取元素
####语法
#id { }
符合选择器（交集选择器）
作用：可以同时使用多个选择器，这样可以选择同时满足多个选择器的元素。
####语法
选择器1选择器2 { }
群组选择器（并集选择器）
作用：可以同时使用多个选择器，多个选择器将被同时应用指定的样式
####语法
选择器1，选择器2，选择器3 { }
通用选择器
作用：可以选中页面中所有的元素
####语法
* { }
后代选择器
作用：后低选择器可以根据标签的关系，为处在元素内部的代元素设置样式
####语法
祖先元素 后代元素 后代元素{ }
选择器小练习
| 题号 | 代码 | 选择器 |
|---|---|---|
| 1 | plate | 元素选择器 |
| 2 | bento | 元素选择器 |
| 3 | #fancyID | id选择器 |
| 4 | plate apple | 子元素选择器 |
| 5 | #fancy pickle | 子代选择器 |
| 6 | .small | 类选择器 |
| 7 | bento.small,plate.small | 子代选择器、分组选择器、类选择器 |
| 8 | bento orange | 子代选择器 |
| 9 | plate,bento,plate | 元素选择器、分组选择器 |
| 10 | * | 通用选择器 |
| 11 | plate>* | 子代选择器、通配选择器 |
| 12 | plate+.small,plate+apple | 兄弟选择器（后边一个元素） |
| 13 | bento~pickle | 兄弟选择器（后边所有元素） |
| 14 | plate>apple | 子代选择器 |
| 15 | plate>orange:first-child | 子元素选择器（为第一个子元素） |
| 16 | apple,pickle:only-child | 并集选择器（选择父元素只包含一个同类型子元素） |
| 17 | apple,pickle:last-child | 并集选择器 |
| 18 | :nth-child(3) | 子元素选择器（为指定位置的子元素） |
| 19 | :nth-last-child(4) | 子元素选择器（为bento标签第一个子元素） |
| 20 | apple:first-of-type | 子元素选择器（为apple标签第一个子元素） |
| 21 | plate:nth-of-type(even) | 子元素选择器 （为plate标签偶数子元素） |
| 22 | plate:nth-of-type(2n+3) | 子元素选择器（选择第2n+3个plate元素）【公式2n+3中n是计数器（从0开始）3是偏移值】 |
| 23 | apple:only-of-type | 选择父元素只包含一个同类型子元素，且包含apple元素 |
| 24 | orange:last-of-type,apple:last-of-type | 子元素选择器（选择最后一个标签） |
| 25 | bento:empty | 选择bento标签没有子元素的元素 |
| 26 | apple:not(.big,.small) | 子元素选择器 （否定伪类） |
伪类和伪元素
有时候，你需要选择本身没用标签，但是仍然易于识别的网页部位，比如段落首行或鼠标滑过的链接，CSS为他们提供一些选择器：伪类和伪元素
#给链接定义样式
###正常链接
a:link
访问过的链接
a:visited（只能定义字体颜色）
鼠标滑过的链接
a:hover
正在点击的链接
a:active
其他的选择器方法
获取焦点
:focus
指定元素前
:before
指定元素后
:after
选中的元素
::selecti
段落定义首字母
:first-letter
段落定义首行
:first-line
属性选择器
语法
[属性名]
[属性名="属性值"]
[属性名~="属性值]
[属性名|="属性值]
[属性名^="属性值]
[属性名$="属性值]
[属性名*="属性值]
子元素选择器
作用：子元素选择器可以给另一个元素的子元素设置样式
- 语法
父元素 > 子元素 {}
其他子元素选择器
选择第一个子标签
:first-child
选择最后一个子标签
:last-child
选择指定位置的子元素
:nth-child
选择指定类型的子元素
:first-of-type
:last-of-type
:nth-of-type
兄弟选择器
作用:除了根据祖先父子关系，还可以根据兄弟元素查找元素
- 语法
兄弟元素 + 兄弟元素{}
查找后边一个兄弟元素
兄弟元素 ~ 兄弟元素{}
查找后边所有的兄弟元素
否定伪类
作用:否定伪类可以帮助我们选择不是其他东西的某件东西
- 语法
:not(选择器){}
继承
- 继承就像父亲的财产会继承给儿子一样，在CSS中祖先元素的样式同样也会被子元素继承
- 继承是指应用在一个标签上的那些CSS样式会同时被应用到其内嵌标签上
比如
为父元素设置了字体颜色，子元素也会应用相同的颜色，当然并不是所有的样式都会被继承
选择器的权重
作用：在页面中使用CSS选择器选中元素时，经常都是一个元素同时被多个选择器选中
###权重的计算
不同的选择器有不同的权重值
| 选择器 | 权重 |
|---|---|
| 内联样式 | 1000 |
| ID选择器 | 100 |
| 类，属性，伪类选择器 | 10 |
| 元素选择器 | 1 |
| 通配符 | 0 |