=Start=
缘由：
简单记录一下常用CSS选择器的语法，方便要用的时候（快速提取页面上的PDF/图片的下载链接，特定位置的页面内容，选中特定元素进行样式的修改，……）参考。
正文：
参考解答：
- 1、先元素-直接元素名称即可
document.querySelector("div")
<div class="hero-title container">
<a href="../"><h1>Principles</h1></a>
</div>- 2、后属性-放在方括号[]内
document.querySelector("[href$='.png']")
<link rel="apple-touch-icon" type="image/png" href="../assets/apple-touch-icon-57x57-sha1.png" sizes="57x57">
document.querySelector("[type$='script']")
<script type="text/javascript" async src="https://www.google-analytics.com/analytics.js"></script>
document.querySelector("[type$='css']")
<link type="text/css" rel="stylesheet" href="../assets/main-sha1.css">- 3、再类型-以.开头（也可以和元素的进行叠加，此时.前面是元素名）
document.querySelector(".back_to_top")
<a class="back_to_top" href="#">Back to Top</a>- 4、最后id-以#开头准确指定
document.querySelector("#mc-empires_embed_signup_scroll")
<div id="mc-empires_embed_signup_scroll">
...
</div>jQuery 选择器基于元素的 id、类、类型、属性、属性值等”查找”（或选择）HTML 元素。它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。jQuery 中所有选择器都以美元符号开头：$()。常见的CSS选择器只需要把jQuery选择器开头的美元符号替换成document.querySelector即可在满足兼容性的基础上实现相同功能（现在很多前端框架已经开始不默认引入jQuery了，所以那样可能会报错，但是它肯定还是一个DOM树，CSS选择器的功能还是支持的）。
获取文档中第一个 <p> 元素：
document.querySelector("p");
获取文档中 class="example" 的第一个元素:
document.querySelector(".example");
获取文档中 class="example" 的第一个 <p> 元素:
document.querySelector("p.example");
获取文档中有 "target" 属性的第一个 <a> 元素：
document.querySelector("a[target]");$('div.weui_ellipsis_mod_inner').each(function() {
console.log(this.innerText);
});
var array = document.querySelectorAll("div.weui_ellipsis_mod_inner");
var length = array.length;
for (var i=0; i < length; i++) {
// console.log(array[i]);
console.log(array[i].innerText);
}参考链接：
querySelector, wildcard element match?
https://stackoverflow.com/questions/8714090/queryselector-wildcard-element-match
jquery selector for div with class
https://stackoverflow.com/questions/10557620/jquery-selector-for-div-with-class
Document.querySelector()
https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
CSS 选择器
https://www.runoob.com/cssref/css-selectors.html
jQuery 选择器
https://www.runoob.com/jquery/jquery-ref-selectors.html
HTML DOM querySelector() 方法
https://www.runoob.com/jsref/met-document-queryselector.html
=END=
《 “CSS 选择器简单学习” 》 有 2 条评论
仅使用CSS就可以提高页面渲染速度的4个技巧
https://mp.weixin.qq.com/s/uSrSioux6dCirmhgnbeUNQ
`
1. Content-visibility
一般来说，大多数Web应用都有复杂的UI元素，它的扩展范围超出了用户在浏览器视图中看到的内容。在这种情况下，我们可以使用内容可见性（ content-visibility ）来跳过屏幕外内容的渲染。如果你有大量的离屏内容，这将大大减少页面渲染时间。
这个功能是最新增加的功能之一，也是对提高渲染性能影响最大的功能之一。虽然 content-visibility 接受几个值，但我们可以在元素上使用 content-visibility: auto; 来获得直接的性能提升。
2. Will-change 属性
浏览器上的动画并不是一件新鲜事。通常情况下，这些动画是和其他元素一起定期渲染的。不过，现在浏览器可以使用GPU来优化其中的一些动画操作。
通过will-change CSS属性，我们可以表明元素将修改特定的属性，让浏览器事先进行必要的优化。
3. 减少渲染阻止时间
今天，许多Web应用必须满足多种形式的需求，包括PC、平板电脑和手机等。为了完成这种响应式的特性，我们必须根据媒体尺寸编写新的样式。当涉及页面渲染时，它无法启动渲染阶段，直到 CSS对象模型（CSSOM）已准备就绪。根据你的Web应用，你可能会有一个大的样式表来满足所有设备的形式因素。
但是，假设我们根据表单因素将其拆分为多个样式表。在这种情况下，我们可以只让主CSS文件阻塞关键路径，并以高优先级下载它，而让其他样式表以低优先级方式下载。
4. 避免@import包含多个样式表
通过 @import，我们可以在另一个样式表中包含一个样式表。当我们在处理一个大型项目时，使用 @import 可以使代码更加简洁。
关于 @import 的关键事实是，它是一个阻塞调用，因为它必须通过网络请求来获取文件，解析文件，并将其包含在样式表中。如果我们在样式表中嵌套了 @import，就会妨碍渲染性能。
`
https://blog.bitsrc.io/improve-page-rendering-speed-using-only-css-a61667a16b2
HTML选择器的一些语法学习 document.querySelector / document.querySelectorAll
`
document.querySelectorAll(‘h2 a[target=”_blank”][rel=”external”], h3 a[target=”_blank”][rel=”external”]’)
上面这条语句的功能是：
选中所有在 h2/h3 下面属性中包含(target=”_blank”)和(rel=”external”)的 a 元素。
这里有 2 个要点：
1. 多条件中的「或」，用「逗号,」分隔即可；
2. 同时满足多个属性值，用多个「方括号[]」相连即可；
`
搜索关键字： html queryselector multiple attributes
document.querySelector multiple data-attributes in one element
https://stackoverflow.com/questions/29937768/document-queryselector-multiple-data-attributes-in-one-element
搜索关键字： html queryselector condition or
querySelectorAll with multiple conditions
https://stackoverflow.com/questions/34001917/queryselectorall-with-multiple-conditions