CSS 选择器总结

SS 是用于网页设计可用的最强大的工具之一。使用它我们可以在几分钟内改变一个网站的界面，而不用改变页面的标签。

好一段时间不用 CSS ，有一些基础知识的记忆有点模糊了，今天再做一次总结记录，方便日后回顾复习。

选择器分类

在 CSS 中，选择器可分为以下几类：

基本选择器（通配选择器、元素选择器、类选择器、ID 选择器、群组选择器）
层次选择器
属性选择器
伪类选择器
伪元素

基本选择器比较好记，这里就不浪费篇幅，主要是记录一下后三、几种选择器。

层次选择器

选择器	类型	功能描述
E F	后代选择器（包含选择器）	选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内
E>F	子元素选择器	选择匹配的F元素，且匹配的F元素所匹配的E元素的子元素
E+F	相邻兄弟选择器	选择匹配的F元素，且匹配的F元素紧位于匹配的E元素的后面
E~F	通用选择器	选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素

在后代选择器中，规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符（combinator）。每个空格结合符可以解释为“... 在 ... 找到”、“... 作为 ... 的一部分”、“... 作为 ... 的后代”，但是要求必须从右向左读选择器。
如果不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的直接子元素，请使用子元素选择器（Child selector）。
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。

属性选择器

选择器	功能描述
[attribute]	用于选取带有指定属性的元素。
[attribute=value]	用于选取带有指定属性和值的元素。
[attribute~=value]	用于选取属性值中包含指定词汇的元素。
[attribute\|=value]	用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value]	匹配属性值以指定值开头的每个元素。
[attribute$=value]	匹配属性值以指定值结尾的每个元素。
[attribute=value*]	匹配属性值中包含指定值的每个元素。

如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器：

a[href] {}

还可以根据多个属性进行选择，只需将属性选择器链接在一起即可:

a[href][title] {}

除了选择拥有某些属性的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素:

a[href='www.abc.com'] {}

也可以把多个属性-值选择器链接在一起来选择一个文档：

a[href="www.abc.com"][title="abc"] {}

伪类选择器

动态伪类选择器

选择器	类型	功能描述
E:link	链接伪类选择器	选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接锚点上
E:visited	链接伪类选择器	选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于链接锚点上
E:active	用户行为选择器	选择匹配的E元素，且匹配元素被激活。常用于链接锚点和按钮上
E:hover	用户行为选择器	选择匹配的E元素，且用户鼠标停留在元素E上。
E:focus	用户行为选择器	选择匹配的E元素，而且匹配元素获取焦点

目标伪类选择器

选择器	功能描述
E:target	选择匹配E的所有元素，且匹配元素被相关URL指向

UI元素状态伪类选择器

选择器	类型	功能描述
E:checked	选中状态伪类选择器	匹配选中的复选按钮或者单选按钮表单元素
E:enabled	启用状态伪类选择器	匹配所有启用的表单元素
E:disabled	不可用状态伪类选择器	匹配所有禁用的表单元素

结构伪类选择器

选择器	功能描述
E:first-child	作为父元素的第一个子元素的元素E。与E:nth-child(1)等同
E:last-child	作为父元素的最后一个子元素的元素E。与E:nth-last-child(1)等同
E:root	选择匹配元素E所在文档的根元素。在HTML文档中，根元素始终是html，此时该选择器与html类型选择器匹配的内容相同
E F:nth-child(n)	选择父元素E的第n个子元素F。其中n可以是整数（1，2，3）、关键字（even，odd）、可以是公式（2n+1）,而且n值起始值为1，而不是0.
E F:nth-last-child(n)	选择父元素E的倒数第n个子元素F。此选择器与E:nth-child(n)选择器计算顺序刚好相反，但使用方法都是一样的，其中：nth-last-child(1)始终匹配最后一个元素，与last-child等同
E:nth-of-type(n)	选择父元素内具有指定类型的第n个E元素
E:nth-last-of-type(n)	选择父元素内具有指定类型的倒数第n个E元素
E:first-of-type	选择父元素内具有指定类型的第一个E元素，与E:nth-of-type(1)等同
E:last-of-type	选择父元素内具有指定类型的最后一个E元素，与E:nth-last-of-type(1)等同
E:only-child	选择父元素只包含一个子元素，且该子元素匹配E元素
E:only-of-type	选择父元素只包含一个同类型子元素，且该子元素匹配E元素
E:empty	选择没有子元素的元素，而且该元素也不包含任何文本节点

否定伪类选择器

选择器	功能描述
E:not(F)	匹配所有除元素F外的E元素

总结

CSS 可以说是前端的基本技能，希望我们都能够通过 CSS 为自己绘制色彩缤纷的前端生涯！

~ 本文完

学习有趣的知识，结识有趣的朋友，塑造有趣的灵魂！
大家好！我是〖编程三昧〗的作者 隐逸王，我的公众号是『编程三昧』，欢迎关注，希望大家多多指教！
知识与技能并重，内力和外功兼修，理论和实践两手都要抓、两手都要硬！

章目录

一 bootstrap 时间日期日历控件datetimepicker

应用

涉及的样式

图片样式展示

手机

属性及使用示例

可用属性列表

示例1:2017-03-30 上午 09:50

示例2：2017-03-30

示例3：仅选择时间

2.3 weekStart 一周从那一天开始

2.4 startDate 开始时间

2.5 endDate 结束时间

2.6 daysOfWeekDisabled 一周禁用的日期

2.7 autoclose 是否自动关闭日期选择器

2.8 startView 日期时间选择器打开之后首先显示的视图。

2.9 minView 日期时间选择器所能提供的最精确的时间选择视图

2.10 maxView 日期选择器最高能展示的范围视图

2.11 todayBtn 是否显示'today'按钮

2.12 todayHighlight 当天日期高亮

2.13 keyboardNavigation 方向键改变日期

2.14 language 语言

2.15 forceParse 强制解析

2.16 minuteStep 步进值

2.17 pickerPosition 选择框的位置

2.18 showMeridian 是否显示上午/下午

2.19 initialDate 初始化日期时间

3.1绑定输入框，并设置format选项

3.2作为组件使用：

3.3时间范围选择联动

具体属性展示

一 bootstrap 时间日期日历控件datetimepicker

应用

手机

涉及的样式

图片样式展示

</span>

</a>

</span>

</a>

</div>

<span class="input-group-addon">活动结束日期</span>

</span>

</a>

</div>

手机

</div>

</div>

属性及使用示例

$('.date').datetimepicker();

选中的日期会被存放在id为date的input里。

//设置日期时间控件

$('#datetimepicker1').datetimepicker({

language: 'zh-CN',//显示中文

format: 'yyyy-mm-dd hh:ii:ss',//显示格式

minView: 0,//设置只显示到月份

initialDate: new Date(),

autoclose: true,//选中自动关闭

todayBtn: true,//显示今日按钮

locale: moment.locale('zh-cn')

});

要：在本文中，将重点关注网页的初始渲染，即它从解析 HTML 开始。我将探索可能导致高渲染时间的问题，以及如何解决它们。

本文分享自华为云社区《页面首屏渲染性能指南-云社区-华为云》，作者：Ocean2022。

我们知道渲染页面是一个将服务器的响应内容翻译成图片的过程。但是，如果你页面的渲染性能比较糟糕的话，可能会带来相对较高的跳出率。

在本文中，我将重点关注网页的初始渲染，即它从解析 HTML 开始。我将探索可能导致高渲染时间的问题，以及如何解决它们。

关键渲染路径（CRP）

关键渲染路径 (CRP) 是浏览器将代码转换为屏幕上可显示像素的过程。它有几个阶段，其中一些可以并行执行以节省时间，但有些部分必须依次完成。 如下图所示：

首先，一旦浏览器得到响应，它就会开始解析它。当它遇到依赖项时，它会尝试下载它。如果它是一个样式表文件，浏览器必须在渲染页面之前完全解析它，这就是为什么 CSS 会阻塞渲染的原因。

如果是脚本，浏览器必须：停止解析，下载脚本，然后运行。只有在那之后它才能继续解析，因为 JavaScript 程序可以改变网页的内容（尤其是 HTML）。这就是为什么 JS 会阻塞解析的原因。

完成所有解析后，浏览器将构建文档对象模型 (DOM) 和级联样式表对象模型 (CSSOM)。将它们组合在一起得到渲染树。页面的不显示部分不会进入渲染树，因为它只包含绘制页面所需的数据。

倒数第二步是将渲染树进行布局，这个阶段也称为回流：就是计算每个渲染树节点的每个位置及其大小的地方。

最后一步是绘制。它会根据浏览器在前一阶段计算得到的数据对像素进行着色。

优化相关结论

因此，根据这一过程，我们在优化性能方面，得出了一些结论。如果你要提升页面初始化渲染的性能，你需要：

减少传输的数据量
减少浏览器必须下载的资源数量（尤其是阻塞的资源）
减小 CRP 的长度

同时，我们会根据下面 3 个指标来衡量优化的效率：

FP(First Paint)
FCP(First Contentful Paint)
FMP(First Meaningful Paint)

除了渲染时间之外，还有其他一些因素也需要考虑。例如，你的页面使用了多少阻塞资源以及下载它们需要多长时间。

性能优化策略

鉴于我们在上面得出的结论，我们得出网站性能优化有三种主要策略：

尽量减少通过网络传输的数据量；
减少通过网络传输的资源总数；
缩短关键渲染路径；

1. 减少要传输的数据量

首先，移除所有未使用的部分，例如 JavaScript 中无法访问的函数、带有从不匹配任何元素的选择器的样式以及被 CSS 永远隐藏的 HTML 标签。其次，删除所有重复项。

然后，我建议建立一个自动压缩过程。例如，它应该从你的后端服务中删除所有注释（但不是源代码）以及每个不包含附加信息的字符（例如 JS 中的空白字符）。

完成后，我们剩下的可以是文本字符串。这意味着我们可以安全地应用诸如 GZIP（大多数浏览器都理解）之类的压缩算法。

最后，还有缓存。浏览器第一次呈现页面时它不会有帮助，但它会在以后的访问中节省很多。 但是，记住两点至关重要：

如果你使用 CDN，请确保支持缓存并在正确设置。
与其等待资源的到期，不如 将文件的“指纹”嵌入到其 URL 中，以使本地缓存无效。

当然，应该为每个资源定义缓存策略。有些可能很少改变或根本不会改变，有的则是变化的很快，还有些文件包含敏感的信息（可以使用 “private” 防止 CDN 缓存私有数据）。

2. 减少关键资源的总数

“关键”仅指网页正确呈现所需的资源。因此，我们可以直接跳过所有流程中没有涉及的样式以及脚本文件。

样式

为了告诉浏览器不需要特定的 CSS 文件，我们应该为所有引用样式表的链接设置媒体属性。使用这种方法，浏览器将只根据需要处理与当前媒体（设备类型、屏幕尺寸）匹配的资源，同时降低所有其他样式表的优先级。例如，如果你将 media=“print” 属性添加到引用样式以打印页面的样式标记，则这些样式不会在不打印媒体时干扰你的关键渲染路径。

为了进一步改进该过程，你还可以将一些样式内联，这可以为我们节省了至少一次到服务器的往返行程。

脚本

如上所述，脚本会阻塞解析，因为它们可以改变 DOM 和 CSSOM。为了避免这一点，所有脚本标签都必须用属性标记——异步或延迟。

标有 async 的脚本不会阻塞 DOM 构建或 CSSOM，因为它们可以在 CSSOM 构建之前执行。但请记住，内联脚本无论如何都会阻止 CSSOM，除非你将它们放在 CSS 之上。

相比之下，标有 defer 的脚本将在页面加载结束时进行执行。

换句话说，使用 defer，脚本直到页面加载事件被触发后才会执行，而 async 让脚本在文档被解析时就会在后台运行。

3.缩短关键渲染路径长度

最后，应将 CRP 长度缩短到可能的最小值。

作为样式标签属性的媒体查询将减少必须下载的资源总数。 script 标签属性 defer 和 async 将防止相应的脚本阻塞解析。

使用 GZIP 压缩、压缩和归档资源将减少传输数据的大小（从而也减少数据传输时间）。

内联一些样式和脚本也可以减少浏览器和服务器之间的往返次数。

按照最新的最佳性能实践理念，一个网站应该做的最快的第一件事就是展示 ATF 内容。 ATF 代表首屏。 这是立即可见的区域，无需滚动。 因此，最好以首先加载所需样式和脚本的方式重新排列与渲染相关的所有内容，而其他所有内容都停止（既不解析也不渲染）。

结尾

总而言之，网站性能优化包含了网站响应的各个方面，例如缓存、设置 CDN、重构、资源优化等，但是所有这些都可以逐步完成。作为 Web 开发人员，你可以将本文作为参考，并始终记住在实验之前和之后测量性能。

浏览器开发人员尽最大努力优化你访问的每个页面的网站性能，这就是浏览器通常实现所谓的“预加载器”的原因。这部分程序会在你以 HTML 格式请求的资源之前进行扫描，以便一次发出多个请求并让它们并行运行。这就是为什么在 HTML（逐行）以及脚本标签中保持样式标签彼此靠近的原因。

此外，尝试批量更新 HTML 以避免多个布局事件，这些事件不仅由 DOM 或 CSSOM 中的更改触发，而且在设备方向更改和窗口大小调整时也会触发。

点击下方，第一时间了解华为云新鲜技术~

华为云博客_大数据博客_AI博客_云计算博客_开发者中心-华为云

在线咨询

上一篇：作为一名潮流的程序员，你需要知道HTML5的三大优势
下一篇：HTML基础教程：类了解一下

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

CSS 选择器总结

选择器分类

层次选择器

属性选择器

伪类选择器

动态伪类选择器

目标伪类选择器

UI元素状态伪类选择器

结构伪类选择器

否定伪类选择器

总结

关键渲染路径（CRP）

优化相关结论

性能优化策略

1. 减少要传输的数据量

2. 减少关键资源的总数

样式

脚本

3.缩短关键渲染路径长度

结尾

您的项目需求