本期文章我整理了CSS选择器从基础到进阶，包含基础选择器，组合选择器，伪类选择器和伪素选择器及语法案例优先级，典型应用场景等。看完这篇文章伪类选择器和伪元素选择器就不会傻傻分不清楚了。

在 CSS 选择器家族中，新增这样一类比较新的选择器 -- 逻辑选择器，目前共有 4 名成员:is，:where，:not，:has，本文将带领大家了解、深入它们。做到学以致用，写出更现代化的选择器。

前端项目开发中，需要根据行数的奇数和偶数的不同，设置不同的颜色显示，以在视觉上给用户以良好的浏览体验，这里就需要使用css奇数偶数选择器。

本节我们来看一下 Sass 中的选择器函数，选择器函数用于查看与处理选择器。selector-append() 函数用于将一个或多个选择器添加到第一个选择器的后面。selector-parse() 函数将字符串的选择符 selector 转换成选择器队列。

如何用css选择器选择某元素下的最后一个子元素？这里我们需要使用CSS3中的:last-child 选择器，指定属于其父元素的最后一个子元素的 p 元素的背景色：

相信做过网页的对Css都不是很陌生，它可以帮助我们重铸网页中很多绚丽的特效，尤其是现在Css已经发展3.0版本，很多功能更是丰富多彩，让我们的开发时间不仅大大缩短，而且还可以轻松做出许多华丽的特效，需要注意的是

CSS3选择器分类如下图所示,通配选择器*选择文档中所有HTML元素;类选择器选择指定class属性值为class的任意类型的任意多个元素

CSS中的 :focus-within 伪选择器可有点“不寻常”，尽管它的名称看上去很简单，而且相当直观。但它的解释是：选择一个包含具有:focus 的任何子元素的元素。有点绕是不是，但仔细读应该也能理解，下面通过具体的例子你就更能理解了

!important > 内联 > ID选择器 > 类选择器 > 标签选择器。优先级是由A、B、C、D的值来决定的，其中它们的值计算规则如下：如果存在内联样式，那么A = 1, 否则A = 0;B的值等于ID选择器出现的次数;

这3种属性选择器是字符匹配，而非单词匹配。其中，尖角符号^、美元符号$以及星号*都是正则表达式中的特殊标识符，分别表示前匹配、后匹配和任意匹配。利用这些选择器，纯CSS就可以做出很炫酷的功能。

:eq() 选择器选取带有指定 index 值的元素。 index 值从 0 开始，所有第一个元素的 index 值是 0（不是 1）。经常与其他元素/选择器一起使用，来选择指定的组中特定序号的元素

css选择器中:first-child与:first-of-type是比较容易混淆的概念，这里用案例介绍它们具体的区别。:first-child 选择器是css2中定义的选择器，从字面意思上来看也很好理解，就是第一个子元素。

.类选器名称{css样式代码;}这样的类选择器在css样式编码中是最常用到的,注意：1.英文圆点开头2.其中类选器名称可以任意起名（但不要起中文）;除此之外，还有ID选择器，不过在很多方面，ID选择器都类似于类选择符

属性选择器非常神奇。它们可以使你摆脱棘手的问题，帮助你避免添加类，并指出代码中的一些问题。但是不要担心，虽然属性选择器非常复杂和强大，但是它们很容易学习和使用。在本文中，我们将讨论它们是如何运行的

css可以通过一些选择器来实现选择父元素下某个元素的效果。:first-child p:first-child(first第一个 child子元素)(找第一个子元素为p):last-child p:last-child(last倒数 child子元素)(找倒数第一个子元素为p)