css复合选择器

后代选择器

• 概念： 后代选择器又称为包含选择器
• 作用： 用来选择元素或元素组的子孙后代
• 其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔，先写父亲爷爷，在写儿子孙子。

.class h3{color:red;font-size:16px;}

子元素选择器

- 作用：
  子元素选择器只能选择作为某元素子元素(亲儿子)的元素。
- 其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接

.class>h3{color:red;font-size:14px;}

交集选择器

条件

交集选择器由两个选择器构成，找到的标签必须满足：既有标签一的特点，也有标签二的特点。
比如： p.one 选择的是： 类名为 .one 的 段落标签。

并集选择器

• 应用：

• 如果某些选择器定义的相同样式，就可以利用并集选择器，可以让代码更简洁。

• 并集选择器（CSS选择器分组）是各个选择器通过,连接而成的，通常用于集体声明。

• 任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。

• 记忆技巧： 并集选择器通常用于集体声明 ，逗号隔开的，所有选择器都会执行后面样式，逗号可以理解为 和的意思。

链接伪类选择器

- a:link      /* 未访问的链接 */
- a:visited   /* 已访问的链接 */
- a:hover     /* 鼠标移动到链接上 */
- a:active    /* 选定的链接 */

注意

• 写的时候，他们的顺序尽量不要颠倒 按照 lvha 的顺序。否则可能引起错误。

属性选择器

选择符	简介
E[att]	选择具有att属性的E元素
E[att=“val”]	选择具有att属性且属性值等于val的E元素
E[att^=“val”]	匹配具有att属性、且值以val开头的E元素
E[att$=“val”]	匹配具有att属性、且值以val结尾的E元素
E[att*=“val”]	匹配具有att属性、且值中含有val的E元素

注意：类选择器、属性选择器、伪类选择器，权重为 10

伪类选择器

选择符	简介
E:first-child	匹配父元素中的第一个子元素E
E:last-child	匹配父元素中最后一个E元素
E:nth-child(n)	匹配父元素中的第n个子元素E
E:first-of-type	指定类型E的第一个
E:last-of-type	指定类型E的最后一个
E:nth-of-type(n)	指定类型E的第n个

nth：第n个的意思（注意：nth是一个单词，单词意思就是第n个）

相比 E:first-child 则要强大了不少，功能如下

• 匹配到父元素的第2个子元素 （这里不能直接写0，写0会被忽略，想选择第一个就写1） ul li:nth-child(2){}

• 匹配到父元素的倒数第2个子元素 ul li:nth-last-child(2){}

• 匹配到父元素的序号为奇数的子元素 ul li:nth-child(odd){} odd 是关键字 奇数的意思

• 匹配到父元素的序号为偶数的子元素 ul li:nth-child(even){} even偶数的意思

• n+5，从5开始往后选择

• -n+5，从5开始往前选择

• 这里的-，负号，可以理解为代表方向。正号往后，负号往前

• 注意：不能写成5-n，这里的-就是减号了，而不是负号。

伪元素选择器

1. E::before： 在E元素前插入一个元素
2. E::after： 在E元素后插入一个元素
3. 单冒号 E:before
4. 双冒号 E::before
5. 浏览器对以上写法都能识别 双冒号 是h5上语法的规范

• before 和 after 必须有 content 属性
• before 在内容的前面，after 在内容的后面
• before 和 after 创建一个元素，但是属于行内元素。
• 因为在 dom 里面看不见刚才创建的元素，所以我们称为伪元素
• 伪元素和标签选择器一样，权重为 1