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个标签的其他标签