CSS【04】：CSS组合选择器

组合选择器

群组（并集）选择器

• 作用：给所有选择器选中的标签设置属性，可以同时控制多个选择器

• 格式：

  选择器1, 选择器2 {
      属性: 值;
  }
  

• 注意点：

  • 必须使用,来连接
  • 选择器可以使用标签名称、id名称、类名称

后代选择器

• 作用：找到指定标签的所有特定的后代标签，设置属性

• 格式：

  标签名称1 标签名称2 {
      属性: 值;
  }
  

• 先找到所有名称叫做“标签名称1”的标签，然后再在这个标签下面去查找所有名称叫做“标签名称2”的标签，然后在设置属性

• 注意点：

  • 后代选择器必须用空格隔开
  • 后代不仅仅是儿子，也包括孙子/重孙子，只要最终是放到指定标签中的都是后代
  • 后代选择器不仅仅可以使用标签名称，还可以使用其它选择器
  • 后代选择器可以通过空格一直延续下去

子代选择器

• 作用：找到指定标签中所有特定的直接子元素，然后设置属性

• 格式：

  标签名称1 > 标签名称2 {
      属性: 值;
  }
  

• 先找到所有名称叫做“标签名称1”的标签，然后在这个标签中查找所有直接子元素名称叫做“标签名称2”的元素

• 注意点：

  • 子元素选择器只会查找儿子，不会查找其他被嵌套的标签
  • 子元素选择器之间需要用>连接
  • 子元素选择器不仅仅可以使用标签名称，还可以使用其它选择器
  • 子元素选择器可以通过>符号一直延续下去

兄弟选择器

相邻兄弟选择器

• 作用：给指定标签后面紧跟的那个标签设置属性

• 格式：

  选择器1 + 选择器2 {
      属性: 值;
  }
  

• 注意点：

  • 相邻兄弟选择器必须通过+连接
  • 相邻兄弟选择器只能选中紧跟其后的那个标签，不能选中被隔开的标签

通用兄弟选择器

• 作用：给指定选择器后面的所有选择器选中的所有标签设置属性

• 格式：

  选择器1 ~ 选择器2 {
      属性: 值;
  }
  

• 注意点：

  • 通用兄弟选择器必须用~连接
  • 通用兄弟选择器选中的是指定选择器后面某个选择器选中的所有标签，无论有没有被隔开都可以选中

交集选择器

• 作用：给所有选择器选中的标签中，相交的那部分标签设置属性

• 格式：

  选择器1选择器2{
      属性: 值;
  }
  

• 注意点：

  • 选择器和选择器之间没有任何的连接符号
  • 择器可以使用标签名称、id名称、class名称
  • 交集选择器仅仅作为了解，企业开发中用的并不多

属性选择器

• [attr]：匹配拥有attr属性的标签
• [attr=val]：匹配拥有attr属性，属性值为val的标签
• [attr^=val]：匹配拥有attr属性，属性值以val开头的标签
• [attr$=val]：匹配拥有attr属性，属性值以val结尾的标签
• [attr*=val]：匹配拥有attr属性，属性值包含val的标签

组合选择器优先级

• 组合选择器优先级与权值相关，权重为权值和
• 权值对应关系

选择器	权值
通配	1
标签	10
类、属性	100
id	1000
!important	10000

• 选择器权值比较，只关心权重和，不更新选择器位置

• 不同级别的选择器间不具备可比性：一个类选择器优先级高于n个标签选择器的任意组合

• 优先级取决于权重，其实就是比较个数

• 不同的修饰符（后代、兄弟、交集...）均不影响权重

• 选择器的位置也不会影响权重

• 权重只和个数有关

• id的权重无限大于class无限大于标签

• 属性选择器的权重与类一样

a标签的四大伪类

/* 链接的初始状态(未被访问过) */
a:link {}

/* 链接被鼠标悬浮 */
a:hover {}

/* 链接处于激活状态(鼠标按下) */
a:active {}

/* 链接已被访问过 */
a:visited {}

伪类选择器

• 作用：选中指定的任意标签然后设置属性

• 同级别的第几个：先确定位置再匹配类型

  • :first-child，选中同级别中的第一个标签
  • :last-child，选中同级别中的最后一个标签
  • :nth-child(n)，选中同级别中的第n个标签
  • nth-last-child(n)，选中同级别中的倒数第n个标签
  • :only-child，选中父元素中唯一的标签

• 同级同类型的第几个：先确定类型再匹配位置

  • :first-of-type，选中同级别中同类型的第一个标签
  • :last-of-type，选中同级别中同类型的最后一个标签
  • :nth-of-type(n)，选中同级别中同类型的第n个标签
  • :nth-last-of-type(n)，选中同级别中同类型的倒数第n个标签
  • :only-of-type，选中父元素中唯一类型的某个标签
  • :not(:nth-of-type(n))，取反操作，除了同级别中同类型的第n个标签的其余标签