1.标签选择器

1.通过标签选择元素
2.标签选择与标签嵌套的层数无关
3.选择的是所有对应的标签，不是对应的不能选中
4.所有标签都可以用标签选择器进行选择

  1. div{
  2.   font-size: 30px;
  3.   color: red;
  4. }

2.ID选择器

1.任何元素都可以有id属性
2.id选择器只能选择一个元素

  1. #a{
  2.   font-size: 30px;
  3.   color: red;
  4. }

3.类(class)选择器

1.任何元素都有class属性
2.多个元素可以使用同一个class选择器
3.同一个元素可以有多个class类名，用空格隔开

  1. .a{
  2.     font-size: 30px;
  3.     color: red;
  4. }

4.通用选择器

1.可以选中页面中的所有元素

  1. *{
  2.   font-size: 30px;
  3.   color: red;
  4. }

5.后代选择器

1.描述的是一种祖先关系，不一定是父子关系
2.祖先和后代之间要有空格

  1. .p2 .c{
  2.   color: red;
  3. }

6.并集选择器

同时可以选择多个元素，以逗号(,)分割

  1. .frontend,.backend{
  2.   color: red;
  3. }

7.交集选择器

选择的元素需要满足多个条件，选择器紧密挨着
选择时，如果有标签，需要把标签放在前面

  1. div.abc{
  2.   color: red;
  3. }

8.第一和最后一个元素

  1. p:first-child{
  2.   color:red
  3. }
  5. div:last-child{
  6.   color: blue;
  7. }

9.nth-child

  1. /*选择的是li父元素(ul)的第五个li子元素*/
  2. li:nth-child(5){
  3.   color: red;
  4. }
  6. /*选择的是li父元素(ul)的奇数子元素*/
  7. li:nth-child(2n+1){
  8.   color: red;
  9. }
  11. /*选择的是li父元素(ul)的偶数子元素*/
  12. li:nth-child(2n){
  13.   color: red;
  14. }
  16. /*选择的是li父元素(ul)的前6个子元素*/
  17. li:nth-child(-n+6){
  18.   color: red;
  19. }
  21. /*选择的是li父元素(ul)的后从5开始后的所有的li*/
  22. li:nth-child(n+5){
  23.   color: red;
  24. }
  26. /*选择的是li父元素(ul)的后从5到8的所有子元素*/
  27. li:nth-child(n+5):nth-child(-n+8){
  28.   color: red;
  29. }

10.CSS继承性

  1. 1.后代元素会继承祖先元素的样式
  2. 2.除color，text-开头，font-开头，line-开头外，其他样式均不能继承

11.叠加性

  1. 当多个选择器选择的是同一个元素，且样式不同的情况下，所有选择器中的样式都会生效

12.层叠性

  1. 当多个选择器选择的是同一个元素，样式相同的情况下，会生效一个样式，另外的样式不会生效

13.CSS优先级

  1. 继承的样式 < 浏览器预设的样式 < 通用选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式
  3. 选择的元素越准确，优先级越高
  4. 优先级相同时，后写的样式会覆盖之前的样式