2.选择器-灵析社区

一、CSS 中哪些选择器？

二、CSS 选择器有哪些组合方式？

① 运算符组合选择器（关系选择器）

② 属性组合选择器

③ 群组选择器

三、对比伪类，伪元素

伪类和伪元素都是选择器，适用于：

无法更改 HTML
要选择的元素不固定
要选择的元素状态或位置关系固定

示例：

::first-line可以选中块级元素的第一行。由于内容、设备宽度变化，第一行的内容也在变化。比起更改 HTML，直接定位某个元素的第一行在实际应用中更加方便。

两者区别如下：

伪类

用于选择元素的特定状态。单冒号开头。分为：

位置关系伪类举例：

用户行为伪类举例：

其它状态伪类举例：

伪元素

用于选择元素的特定部分。双冒号开头。举例：

为兼容早期浏览器，实际使用时，多将双冒号写作单冒号

原因：早期规范没有明确伪元素必须双冒号，当时浏览器多用单冒号，现代浏览器同时兼容单和双冒号

如果不考虑兼容，规范应使用双冒号

四、CSS 选择器命名规则

大小写字母，数字，连字符（-），下划线（_）以及 ISO 10646 字符编码 U+00A1 及以上

不能以数字、连字符（-）开头

类名或 ID 以数字、连字符（-）开头.或#后加\3

ID 选择器以一个（#）开头
类选择器以一个（.）开头

五、什么是 CSS 无效选择器？

无效选择器，即运行环境无法解析的 CSS 选择器

运行环境会跳过无效选择器

群组选择器包含无效选择器，该群组选择器都被跳过

开发者工具中，调试 CSS 时，现代浏览器会自动更正错误命名

六、无效选择器有什么用途？

利用浏览器跳过无效选择器和无效属性的特性

无效选择器，无效属性常用于区分运行环境（多为浏览器），进而：

改善 CSS 兼容性。常用的 CSS Hacks：

① 选择器

② 属性

使用运行环境的私有属性，渐进性增强样式：

七、什么是渐进性增强样式？

通过组合 CSS hacks 和私有属性，在较低版本的浏览器中，保持页面布局和基本样式，在高版本浏览器，使用更高级属性或运行环境的私有属性，增强页面样式，提升用户体验。

渐进性增强，是改善 CSS 兼容性，开发框架的设计思想之一，核心是：

低版本的用户少的浏览器，保障基本功能，舍弃不必要的 CSS hacks 和 Pollyfills
高版本，利用新属性，新接口，提高性能和体验

示例：

<style>
div { /* All */
-width: expression(this.width > 500 ? '500px' : 'auto'); /* IE6 */
max-width: 500px; /* IE7+ */
color: black; /* IE6 黑 */
}
p + div { /* IE7+ */
color: blue; /* IE7 - IE8 蓝 */
}
:not(p) { /* IE9+ */
color: red; /* IE9+ 红 */
-webkit-font-smoothing: antialiased; /* Webkit浏览器 MacOS 平滑文字 */
-moz-osx-font-smoothing: grayscale; /* 火狐浏览器 MacOS 平滑文字 */
}
</style>
<p>p</p>
<div>div</div>

八、如何优化选择器，提高性能？

CSS 选择器效率从高到底：

ID > 类 > 类型（标签） > 相邻 > 子代 > 后代 > 通配符 > 属性 > 伪类

CSS 选择器的读取顺序：从右到左，逐级匹配

示例：

.content * {}，会先匹配到所有元素，再向上筛选出父元素 className 为 content 的子元素

根据效率和读取顺序，提高性能的方法如下：

多使用高效率选择器

工作中，多使用类名，少使用关系、伪类选择器，可读和可维护性也会提高

2. 减少选择器层级

工作中，选择器层次不建议超过 4 级。用 SASS 或 LESS 时，应避免不必要的嵌套

3. 高效率选择器在前

工作中，避免使用类、标签选择器限制 ID 选择器，避免使用标签选择器限制类选择器。

低效率选择器在前，通常可以优化。示例 .content #id {} 可直接写成 #id {}，div .content 可以给 div 起类名

4. 避免使用通配符选择器

通配符选择器效率低，且使用 * 的场景，通常有其他解决方案

5. 多用继承

示例：

<style>
div * { /* bad case */
font-size: 12px;
}
div { /* good case */
font-size: 12px;
}
</style>
 
<div>
<p></p>
<p></p>
<p></p>
</div>