CSS 选择器简单学习

=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=

声明: 除非注明,ixyzero.com文章均为原创,转载请以链接形式标明本文地址,谢谢!
https://ixyzero.com/blog/archives/5032.html

《CSS 选择器简单学习》上的2个想法

  1. 仅使用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

  2. 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

发表评论

邮箱地址不会被公开。 必填项已用*标注