CSS选择器相关

CSS选择器

通过不同的方式获取到我们想要的标签，去设置标签的样式

选择器种类：

标签选择器
- 语法：标签名{样式名:样式值;样式名:样式值; }
- 可以选择到本文件中所有的相同标签
id选择器
- 语法: # 标签的id值{样式名:样式值;样式名:样式值; }
- id的属性值在本文件中唯一
class选择器
- 语法:标签的class值{样式名:样式值;样式名:样式值; }
- class选择器可以选中带有相应class属性值的标签
通配符选择器
- 语法: *{样式名:样式值;样式名:样式值; }
- 通配符选择器可以选中本页面所有的标签
- 通配符选择器一般用来设置margin(外边距)和padding(内边距)
组合选择器
- 并集选择器
  - 语法: 选择器1,选择器2....{样式名:样式值;样式名:样式值; }
  - 并集选择器中的选择器可以是任意类型,也可以有当前页面上不存在的选择器
- 交集选择器
  - 语法:选择器1选择器2....{样式名:样式值;样式名:样式值; }
  - 交集选择器之间没有任何符号链接
  - 交集选择器可以是任意类型
- 后代选择器
  - 语法:选择器1 选择器2....{样式名:样式值;样式名:样式值; }
  - 后代选择器用空格隔开
  - 只要包含在选择器1中的所有选择器2都会被选中,无论是子代还是孙代等等
- 子代选择器
  - 语法:选择器1>选择器2.....{样式名:样式值;样式名:样式值; }
  - 大于号右边的选择器必须是大于号左边的子代,不可以隔代
- 兄弟选择器
  - 通用兄弟选择器:语法:选择器1~选择器2{样式名:样式值;样式名:样式值; }
    - 获取到选择器1后面所有的选择器2(选择器1与选择器2必须是同级关系),无论中间有没有其他标签隔开都能选中
  - 相邻兄弟选择器:语法:选择器1+选择器2{样式名:样式值;样式名:样式值; }
    - 获取到选择器1后面紧连着的第一个选择器2(选择器1与选择器2必须是同级关系)
- 伪类选择器
  - link
    - 语法: 标签名:link{样式名:样式值;样式名:样式值; }
    - 一般给a标签设置
    - 设置选择器的初始状态
  - visited
    - 语法:标签名:visited{样式名:样式值;样式名:样式值; }
    - 一般给a标签设置
    - 设置选择器被访问后的状态
  - hover
    - 语法:标签名:hover{样式名:样式值;样式名:样式值; }
    - 设置鼠标放在被选中标签上的样式
  - active
    - 语法: 标签名:active{样式名:样式值;样式名:样式值; }
    - 设置鼠标按下被选中标签上的样式
- 序选择器
  - 同类型的第几个
    - :first-of-type 选中同级别中同类型的第一个标签
    - :last-of-type 选中同级别中同类型的最后一个标签
    - :nth-of-type(n) 选中同级别中同类型的第n个标签
    - :nth-last-of-type(n) 选中同级别中同类型的倒数第n个标签
    - :only-of-type 选中父元素中唯一类型的某个标签
  - 同级别的第几个(不区分类型)
    - :first-child 选中同级别中的第一个标签
    - :last-child 选中同级别中的最后一个标签
    - :nth-child(n) 选中同级别中的第n个标签
    - :nth-last-child(n) 选中同级别中的倒数第n个标签
    - :only-child 选中父元素中唯一的标签

选择器的权重问题

间接选中(就是继承)
- 如果都是间接选中,那么谁离目标标签比较近就听谁的
直接选中和间接选中
- 此时不用考虑权重问题,直接选中的优先级比较高.

相同选择器(直接选中)
- 如果都是直接选中,并且都是同类型的标签,那么谁写在后面就听谁的
不同选择器
- 如果都是直接选中,并且不是相同类型的选择器,那么就会按照选择器的优先级来层叠.
  - id>类>标签>通配符>继承>浏览器默认
多个选择器混合使用
- id>类>标签按这个顺序依次数哪个混合选择器中id选择器个数最多哪个权重高,id选择器个数相同时数类选择器,类选择器相同时数标签选择器.
- 如果id选择器,类选择器,标签选择器个数都相同时,那么谁写在后面谁的权重高.

猜你喜欢