【夯实基础--CSS】=＞复合选择器

「3. 交集选择器」

• 其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special。

交集选择器是并且的意思,即…又…的意思

比如：

p.one {}

选择的是： 类名为 .one 的段落标签。

/用的相对来说比较少，不建议使用。/

「4. 并集选择器」

如果某些选择器定义的相同样式，就可以利用并集选择器，可以让代码更简洁。并集选择器（CSS选择器分组）是各个选择器通过,连接而成的，通常用于集体声明。

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

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

比如

.one,

p ,

#test {color: #F00;}

表示 .one 和 p 和 #test

这三个选择器都会执行颜色为红色。 通常用于集体声明。

「5. 链接伪类选择器」

用于向某些选择器添加特殊的效果。写的时候，他们的顺序尽量不要颠倒,按照lvha的顺序。否则可能引起错误。

链接伪类，是利用交集选择器.

• a:link 未访问的链接

• a:visited 已访问的链接

• a:hover 鼠标移动到链接上

• a:active 选定的链接

实际工作中，很少写全四个状态，一般写法如下：

a { /* a是标签选择器 所有的链接 */

font-weight: 700;

font-size: 16px;

color: gray;

text-decoration: none; /* 清除链接默认的下划线*/

}

a:hover { /* :hover 是链接伪类选择器 鼠标经过 */

color: red; /* 鼠标经过的时候，由原来的 灰色 变成了红色 */

}

「6. 结构(位置)伪类选择器（CSS3)」

• :first-child :选取属于其父元素的首个子元素的指定选择器

• :last-child :选取属于其父元素的最后一个子元素的指定选择器

• :nth-child(n) ： 匹配属于其父元素的第 N 个子元素，不论元素的类型

• :nth-of-type(n)： 简单来说nth-of-type会忽略其它标签的顺序而安装标签自身种类的顺序进行筛选，也就是选择的参照点并不是DOM数，而是自身。

• :nth-last-child(n) ：选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。

n 可以是数字、关键词或公式

li:first-child { /* 选择第一个孩子 */

color: pink;

}

li:last-child { /* 最后一个孩子 */

color: purple;

}

li:nth-child(4) { /* 选择第4个孩子 n 代表 第几个的意思 */

color: skyblue;

}

nth-child介绍

nth-child(n) 选择器匹配属于其父元素的第 n 个子元素。

使用它的时候需要注意几点：

• 第n个子元素的计数是从1开始，不是从0开始的

• 选择表达式中的字母n代表≥0的整数

它有3种常见用法

• 直接指明n的值：span:nth-child(1)

• 用even/odd分别代表偶数 / 奇数：span:nth-child(even)

• 借助n自定义选择范围：

• nth-child(2n)/nth-child(2n + 1)：偶数 / 奇数

• nth-child(n + 3)：第3个开始到最后

进阶用法

上面的用法中的第三部分，一般都是使用n，而有时候也会用到-n，比如选取前2个元素就是：nth-child(-n + 2)。

为什么是这样呢？其实运算：-n + 2 ≥ 0，就可以推出n ≤ 2。 由此，结合两者自动取交集，我们就可以限制选择某一范围。

比如选择第6个到第9个，就是：:nth-child(-n+9):nth-child(n+6) 注意：不是nth-child(2 - n)，-n要写在一起！ 真正理解“子元素”的含义 还是nth-child选择器，那么下面这段代码的样式是什么呢？

1

2

3

答案是：1是黑色的，2和3都是红色的。

因为<span>2</span>是其父节点的第2个（偶数）子元素,<span>3</span>是其父节点的第2个子元素，第一个是<div></div>

所以辨别是否匹配的关键是：找到父元素，然后再计算在父元素中的位置。

nth-of-type与nth-child的区别

nth-of-child：

​ 它的属性就是按照所有类型标签的所谓整体队列进行排序筛选，也就是说不论你是h1，span还是p标签，使用这个属性你要遵循在DOM树中的顺序来进行操作。

nth-of-type:

​ 简单来说nth-of-type会忽略其它标签的顺序而安装标签自身种类的顺序进行筛选，也就是选择的参照点并不是DOM数，而是自身。就是按照类型来计算，碰到一个同类型就加1。

「7. 目标伪类选择器(CSS3)」

:target目标伪类选择器 :选择器可用于选取当前活动的目标元素

:target {

color: red;

font-size: 30px;

}

「8. 复合选择器总结」

| 选择器 | 作用 | 特征 | 使用情况 | 隔开符号及用法 |

| :-- | :-- | :-- | :-- | :-- |

| 后代选择器 | 用来选择元素后代 | 是选择所有的子孙后代 | 较多 | 符号是空格 .nav a |

| 子代选择器 | 选择 最近一级元素 | 只选亲儿子 | 较少 | 符号是> .nav>p |

| 交集选择器 | 选择两个标签交集的部分 | 既是 又是 | 较少 | 没有符号 p.one |

| 并集选择器 | 选择某些相同样式的选择器 | 可以用于集体声明 | 较多 | 符号是逗号 .nav, .header |

| 链接伪类选择器 | 给链接更改状态 | | 较多 | 重点记住 a{} 和 a:hover 实际开发的写法 |

---

属性选择器

选取标签带有某些特殊属性的选择器 我们成为属性选择器

| 选择器 | 含义 |

| — | — |

| E[attr] | 存在attr属性即可 |

| E[attr|=val] | 选择attr属性的值是 val 或值以 val- 开头的元素 |

| E[attr=val] | 属性值完全等于val |

| E[attr^=val] | 属性值里面包含val字符并且在“开始”位置 |

| E[attr$=val] | 属性值里面包含val字符并且在“结束”位置 |

| E[attr*=val] | 属性值里面包含val字符并且在“任意”位置 |

/* 获取到 拥有 该属性的元素 */

div[class^=font] { /* class^=font 表示 font 开始位置就行了 */

color: pink;

}

div[classKaTeX parse error: Expected '}', got 'EOF' at end of input: …er] { /* class=footer 表示 footer 结束位置就行了 */

color: skyblue;

}

div[class*=tao] { /* class*=tao *= 表示tao 在任意位置都可以 */

color: green;

}

属性选择器

属性选择器

属性选择器

属性选择器

属性选择器

属性选择器123

属性选择器footer

属性选择器footer

属性选择器

属性选择器

属性选择器

存在和值（Presence and value）属性选择器节

这些属性选择器尝试匹配精确的属性值：

• [attr]：该选择器选择包含 attr 属性的所有元素，不论 attr 的值为何。

• [attr=val]：该选择器仅选择 attr 属性被赋值为 val 的所有元素。

• [attr~=val]：该选择器仅选择具有 attr 属性的元素，而且要求 val 值是 attr 值包含的被空格分隔的取值列表里中的一个。

让我们看一个特别的例子，下面是它的的HTML代码：

我的食谱配料: Poulet basquaise

• Tomatoes
• Onions
• Garlic
• Red pepper
• Chicken
• Bacon bits
• Olive oil
• White wine

• 自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

  深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

  因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

  

  

  既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

  

  由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

  如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

  

  最后

  文章到这里就结束了，如果觉得对你有帮助可以点个赞哦，如果有需要前端校招面试题PDF完整版的朋友可以点击这里即可获取，包括答案解析。

  

  KkSGmX8-1712560114840)]

  既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

  [外链图片转存中…(img-d0wJpmTq-1712560114840)]

  由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

  如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

  

  最后

  文章到这里就结束了，如果觉得对你有帮助可以点个赞哦，如果有需要前端校招面试题PDF完整版的朋友可以点击这里即可获取，包括答案解析。

  [外链图片转存中…(img-w6GplOL5-1712560114840)]