导航

HTML

CSS

JavaScript

浏览器 & 网络

版本管理

框架

构建工具

TypeScript

性能优化

软实力

算法

UI、组件库

Node

冷门技能

⭐️ CSS 选择器

⭐️ 基础选择器

⭐️ 属性选择器

备注: p 标签的 class 属性中得包含 important 这个单词，且此单词必须独立存在。

正例: <p class="text-center important">...</p> 反例: <p class="text-center !important">...</p> | | 子串匹配属性选择器 | 以指定值开头 | element[attribute^="value"] | 匹配属性值以指定值开头的元素 | a[href^="https"]会选择所有 href 属性值以 "https" 开头的 <a> 元素 | | | 以指定值结尾 | element[attribute$="value"] | 匹配属性值以指定值结尾的元素 | img[src$=".jpg"]会选择所有 src 属性值以 .jpg 结尾的 <img> 元素 | | | 包含指定值 | element[attribute*="value"] | 匹配属性值中包含指定值的元素 | p[title*="example"]会选择所有 title 属性值中包含 "example" 的 <p> 元素 | | 特定属性选择类型（竖线匹配） | | element[attribute|="value"] | 选择带有指定属性，并且属性值以指定值或者以指定值加横杠（value-）开头的元素。通常用于选择语言属性等。 | [lang|="en"]会选择所有 lang 属性值为 "en" 或者以 "en-" 开头的元素 | | 条件连写 | | element[key1=value1][key2=value2][key3=value3]... | 表示当前元素需要同时具备才会出现效果 | |

https://codepen.io/JingW/pen/VwoygvQ

⭐️ CSS 优先级算法

• 优先级：
  • 同权重下: 内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）
  • !important > id > class > tag
  • !important 比 内联优先级高
• 同权重下：
  • 优先级就近原则，样式定义最近者为准
  • 载入样式以最后载入的定位为准

⭐️ CSS选择器匹配规则

.mod-nav header h3 span

.mod-nav ul a

匹配规则：

• 从右往左

⭐️ 为什么从右往左

**因为写样式是可以越级设置的，**例如 .mod-nav ul a 的这个 a 不一定是直接挂载到 .mod-nav 下的 li 上的 ，有可能像上图所示在其很深层级的位置。

• 如果从左往右效率太低，得一级级逐层遍历
• 但从右往左就会好很多，我们首先就去找到所有的 a 元素，然后找符合父元素中有 ul 的，如此向上过滤，只用“顺藤摸瓜”匹配一条线上的就好。

GPT 回复

CSS选择器的匹配规则的解析是一个从右向左的过程，这样的解析顺序是出于性能优化的考虑。以下是详细解析原理和原因：

解析原理

1. 从右向左匹配的步骤

假设有一个选择器 div ul > li a.active：

1. 从最右边的选择器开始，即 .active，查找所有带有 class="active" 的 <a> 元素。
2. 然后往左移动到 li a.active，过滤掉不在 <li> 内部的 <a> 元素。
3. 接着移动到 ul > li a.active，进一步过滤掉不在直接子元素 <li> 内部的 <a> 元素。
4. 最后到 div ul > li a.active，过滤掉不在 <div> 内部的 <ul> 内部的 <li> 内部的 <a> 元素。

2. 优化原因

这种从右向左的匹配方式主要是为了优化选择器的性能：

• 减少不必要的查找：从右向左匹配能够立即定位具体的元素，从而避免从文档根部开始的全局搜索。假设选择器是从左到右匹配，会从文档根部开始搜索所有 <div>，然后查找每个 <div> 下的 <ul>，再查找 <ul> 下的 <li>，最后检查 <li> 下是否有符合条件的 <a>。这可能导致大量无效的查找。
• 降低复杂度：CSS 引擎可以快速排除不符合条件的元素。例如，选择器 .active 可以迅速筛选出特定的 <a> 元素，大大减少需要进一步检查的元素数量。

示例解释

假设有以下 HTML 结构：

<div>
  <ul>
    <li><a class="active">Link 1</a></li>
    <li><a>Link 2</a></li>
  </ul>
</div>

对于选择器 div ul > li a.active：

1. 最右边选择器 .active：查找所有带 class="active" 的 <a> 元素，找到 <a class="active">Link 1</a>。
2. 过滤父元素 <li>：确定这个 <a> 是否在 <li> 内，是的，继续。
3. 检查父元素 <ul> 的子元素关系：确认这个 <li> 是直接子元素 <ul>，是的，继续。
4. 最终检查 <div> 元素：确认这个 <ul> 是否在 <div> 内，是的，匹配成功。

实际性能影响

这种从右向左的解析方式减少了不必要的查找和遍历，提高了选择器匹配的效率。因为浏览器引擎可以在找到潜在匹配的元素后，逐步验证其祖先元素是否符合条件，从而避免了大量无效的元素检查。

总结：

从右向左匹配的解析顺序是为了优化选择器的性能，使得浏览器可以快速排除不符合条件的元素，并减少不必要的全局查找和遍历，提高渲染效率。

CSS3 新增伪类

• p:first-of-type
  • 属于其父元素的特定类型首个子元素, 等同于 :nth-of-type(1)
• p:last-of-type
  • 属于其父元素的特定类型的最后一个子元素, 等同于 :nth-last-of-type(1)
• ::after
  • 在元素之前添加内容,也可以用来做清除浮动
• ::before
  • 在元素之后添加内容
• :enabled/:disabled
  • 控制表单控件的禁用状态
• :checked
  • 单选框或复选框被选中

⭐️ CSS 伪类、CSS 伪元素

伪类

CSS 伪类 是添加到选择器的关键字，指定要选择的元素的特殊状态。例如，:hover 可被用于在用户将鼠标悬停在按钮上时改变按钮的颜色。

• :active
• :checked
• :visited
• 链接伪类选择器
  • :link 未访问的链接
  • :visited 已访问的链接
  • :hover 鼠标移动到链接上
  • :active 选定的链接

伪类应用

/*
	我们想让被访问过的链接和未被访问的链接看起来一样
*/
a:visited {
  color: blue;
}

span:nth-child(1)
/* 表示父元素中子元素为第一的并且名字为 span 的标签被选中 */

伪元素

CSS 伪元素（Pseudo-element）跟伪类很像，但它们又有不同的地方。它们都是关键字，但这次伪元素前缀是两个冒号 (::) ， 同样是添加到选择器后面去选择某个元素的某个部分。【::after生成的是个inline元素】

• ::after
• ::before
• ::first-letter
• ::first-line

注意

伪元素必须写 content 属性

伪元素应用

/*
	所有含有"href"属性并且值以"http"开始的元素，
	将会在其内容后增加一个箭头（去表明它是外部链接）
*/
[href^=http]::after {
  content: '⤴';
}