[油猴脚本开发指南]querySelector与css选择器入门

cxxjackie · 发表于 2022-3-1 20:57:14

由于常有新手用不好querySelector，翻了一下论坛似乎缺少这方面的教程，那就我自己写一个吧。以下我会列出几种常用的选择器，注意不是所有，如果你想学习更详尽的css语法，应该去翻阅更详细的文档，本文主要面对的是新手入门。

类选择器与id选择器
用class和id来匹配元素，即.class和#id的形式，这是最常见的两种选择器。

类型选择器
以元素的类型来匹配，比如div、input、body等等。

属性选择器
匹配元素的某个属性，要用方括号括起来，举个简单的例子：[name="btn"]，即匹配name为btn的元素。属性选择器也可以实现类选择器与id选择器的效果，或者说这2种选择器是属性选择器的简写形式。等号右边的引号可以省略，但在一些特殊情况下不可省，比如：[style="display: none;"]，由于右边的属性值包含特殊字符（冒号和空格），省略引号会出错，如果你没有把握，建议任何情况下都不省略引号。等号和右边的属性值可以不加，如[id]，这种情况下会匹配所有包含id这个属性的元素。

属性选择器的正则写法
把等号换成别的符号以实现模糊匹配，记住这3个就够了：
^= 匹配开头
$= 匹配结尾
*= 匹配中间
比如本论坛的登录窗口，用户名那个输入框的id是username_XXXXX，后面是随机字符，要匹配这个元素就可以写成：[id^="username_"]。其他还有~=和|=，不过不太常用，为避免记忆混乱可不做了解。

子代选择器
匹配元素的子元素，注意与下面的后代选择器区分，示例：body>div。>号的左右可以加空格，也可以不加，一般加上去会让选择器的结构看起来更清晰，但也可能造成语义上的混淆（与后代选择器相比），加不加看个人习惯。

后代选择器
匹配元素后代的所有元素，即不仅包含子元素，也包含子元素的子元素，示例：body div。由于空格通常指的是后代选择器，所以css中是不能随便加空格的。子代和后代选择器可以连起来使用，实现从上到下精确定位。

通配符选择器
即*，匹配所有元素，一般与其他选择器结合使用，比如选中body的所有子元素就可以写成：body>*。大多数情况下，*号可以省略，保留*号一般是出于语义上的考虑。document.querySelectorAll('*')可以选中页面的所有元素，在这种用法下，*号不可省略。

:nth-child()选择器
可以用来表示该元素是其兄弟元素中的第几个，示例：

<body>
<span></span>
<div>选我选我</div>
<div></div>
</body>

复制代码

由于这个div是第二个子元素，所以写成：body>div:nth-child(2)。:nth-child与子代/后代选择器的结合使用，基本可以选中任意元素。:nth-child还有an+b的用法，可不做了解。

:not()选择器
匹配括号内选择器的反选，比如:not(.class1)将匹配所有类名中不包含class1的元素。注意括号内只能填入一个选择器，填入逗号分隔的多个选择器是实验性的用法，为避免兼容问题不建议使用，可以将多个:not并列使用来实现相同效果。

选择器的并列
多个选择器并列使用时（中间不加任何符号），匹配的元素必须符合所有规则，用于提高匹配精度，比如这样：div.class1[title][name]。注意元素class中间的空格代表多个类名，而类选择器一次只匹配一个类名，这是新手常犯的错误，要匹配完整类名应该并列使用多个类选择器，比如class="class1 class2"，选择器应该写成：.class1.class2。

选择器的合并
在多个选择器之间加逗号，可用于匹配多个元素。在css中，这种写法可以将多个相同效果合并，比如：

.class1{display: none;}
.class2{display: none;}

复制代码

可以合并为

.class1,.class2{display: none;}

复制代码

在js中，这种写法通常用于querySelectorAll，用不同规则来同时选中多个元素。逗号后可加空格可不加。

李恒道 · 发表于 2022-3-1 21:00:44

在我说话的这一秒之前是你写的
但是现在归我了！

李恒道 · 发表于 2022-3-1 21:01:24

我给哥哥算[油猴脚本开发指南]里行么

cxxjackie · 发表于 2022-3-1 21:08:40

李恒道发表于 2022-3-1 21:01
我给哥哥算[油猴脚本开发指南]里行么

可以可以，记得加上：在李恒道指导下完成

admin · 发表于 2022-3-1 21:28:02

cxxjackie 发表于 2022-3-1 21:08
可以可以，记得加上：在李恒道指导下完成

我回头搞出来网站给哥哥挂首页！

话说我很好奇哥哥你学多少年前端了

Hangover · 发表于 2022-3-1 21:45:30

ggnb！！！

cxxjackie · 发表于 2022-3-1 23:11:25

admin 发表于 2022-3-1 21:28
我回头搞出来网站给哥哥挂首页！

话说我很好奇哥哥你学多少年前端了

忘了哈哈，断断续续学的。

李恒道 · 发表于 2022-3-2 10:33:09

cxxjackie 发表于 2022-3-1 23:11
忘了哈哈，断断续续学的。

大概记着什么时候学的吗？
cxxjackie答:没什么印象了，只记得早年自己曾经带过两个弟子，一个叫图灵，一个叫冯诺依曼，后来战乱，他俩就不知道干什么去了

cxxjackie · 发表于 2022-3-2 10:36:55

李恒道发表于 2022-3-2 10:33
大概记着什么时候学的吗？
cxxjackie答:没什么印象了，只记得早年自己曾经带过两个弟子，一个叫图灵，一个 ...

还拜过两个师傅，一个叫李一之，一个叫王恒道！

李恒道 · 发表于 2022-3-2 14:24:54

cxxjackie 发表于 2022-3-2 10:36
还拜过两个师傅，一个叫李一之，一个叫王恒道！

哥哥刚进论坛还不是这样的！哈哈哈哈哈哈哈

[油猴脚本开发指南]querySelector与css选择器入门

发表回复

荣誉开发者

卓越贡献

油中2周年

生态建设者

油中3周年

挑战者 lv2

喜迎中秋

管理员