上一主题 下一主题
ScriptCat,新一代的脚本管理器脚本站,与全世界分享你的用户脚本油猴脚本开发指南教程目录
12下一页
返回列表 发新帖

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

[复制链接]
  • TA的每日心情
    慵懒
    2022-3-8 11:41
  • 签到天数: 2 天

    [LV.1]初来乍到

    22

    主题

    857

    回帖

    1356

    积分

    荣誉开发者

    积分
    1356

    荣誉开发者卓越贡献油中2周年生态建设者油中3周年挑战者 lv2

    发表于 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()选择器
    可以用来表示该元素是其兄弟元素中的第几个,示例:
    1. <body>
    2.     <span></span>
    3.     <div>选我选我</div>
    4.     <div></div>
    5. </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中,这种写法可以将多个相同效果合并,比如:
    1. .class1{display: none;}
    2. .class2{display: none;}
    复制代码
    可以合并为
    1. .class1,.class2{display: none;}
    复制代码
    在js中,这种写法通常用于querySelectorAll,用不同规则来同时选中多个元素。逗号后可加空格可不加。

  • TA的每日心情
    开心
    2023-2-28 23:59
  • 签到天数: 191 天

    [LV.7]常住居民III

    620

    主题

    5085

    回帖

    5959

    积分

    管理员

    非物质文化遗产社会摇传承人

    积分
    5959

    荣誉开发者管理员油中2周年生态建设者喜迎中秋

    发表于 2022-3-1 21:00:44 | 显示全部楼层
    在我说话的这一秒之前是你写的
    但是现在归我了!
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

  • TA的每日心情
    开心
    2023-2-28 23:59
  • 签到天数: 191 天

    [LV.7]常住居民III

    620

    主题

    5085

    回帖

    5959

    积分

    管理员

    非物质文化遗产社会摇传承人

    积分
    5959

    荣誉开发者管理员油中2周年生态建设者喜迎中秋

    发表于 2022-3-1 21:01:24 | 显示全部楼层
    我给哥哥算[油猴脚本开发指南]里行么
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

  • TA的每日心情
    慵懒
    2022-3-8 11:41
  • 签到天数: 2 天

    [LV.1]初来乍到

    22

    主题

    857

    回帖

    1356

    积分

    荣誉开发者

    积分
    1356

    荣誉开发者卓越贡献油中2周年生态建设者油中3周年挑战者 lv2

    发表于 2022-3-1 21:08:40 | 显示全部楼层
    李恒道 发表于 2022-3-1 21:01
    我给哥哥算[油猴脚本开发指南]里行么

    可以可以,记得加上:在李恒道指导下完成
    回复

    使用道具 举报

  • TA的每日心情
    开心
    2023-6-5 00:59
  • 签到天数: 4 天

    [LV.2]偶尔看看I

    9

    主题

    42

    回帖

    233

    积分

    管理员

    积分
    233

    管理员油中3周年

    发表于 2022-3-1 21:28:02 | 显示全部楼层
    cxxjackie 发表于 2022-3-1 21:08
    可以可以,记得加上:在李恒道指导下完成

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

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

    使用道具 举报

  • TA的每日心情
    奋斗
    2023-7-6 11:14
  • 签到天数: 253 天

    [LV.8]以坛为家I

    41

    主题

    319

    回帖

    2178

    积分

    荣誉开发者

    累计点滴改进,迈向完美品质。

    积分
    2178

    荣誉开发者油中2周年生态建设者

    发表于 2022-3-1 21:45:30 | 显示全部楼层
    ggnb!!!
    回复

    使用道具 举报

  • TA的每日心情
    慵懒
    2022-3-8 11:41
  • 签到天数: 2 天

    [LV.1]初来乍到

    22

    主题

    857

    回帖

    1356

    积分

    荣誉开发者

    积分
    1356

    荣誉开发者卓越贡献油中2周年生态建设者油中3周年挑战者 lv2

    发表于 2022-3-1 23:11:25 | 显示全部楼层
    admin 发表于 2022-3-1 21:28
    我回头搞出来网站给哥哥挂首页!

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

    忘了哈哈,断断续续学的。
    回复

    使用道具 举报

  • TA的每日心情
    开心
    2023-2-28 23:59
  • 签到天数: 191 天

    [LV.7]常住居民III

    620

    主题

    5085

    回帖

    5959

    积分

    管理员

    非物质文化遗产社会摇传承人

    积分
    5959

    荣誉开发者管理员油中2周年生态建设者喜迎中秋

    发表于 2022-3-2 10:33:09 | 显示全部楼层
    cxxjackie 发表于 2022-3-1 23:11
    忘了哈哈,断断续续学的。

    大概记着什么时候学的吗?
    cxxjackie答:没什么印象了,只记得早年自己曾经带过两个弟子,一个叫图灵,一个叫冯诺依曼,后来战乱,他俩就不知道干什么去了
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

  • TA的每日心情
    慵懒
    2022-3-8 11:41
  • 签到天数: 2 天

    [LV.1]初来乍到

    22

    主题

    857

    回帖

    1356

    积分

    荣誉开发者

    积分
    1356

    荣誉开发者卓越贡献油中2周年生态建设者油中3周年挑战者 lv2

    发表于 2022-3-2 10:36:55 | 显示全部楼层
    李恒道 发表于 2022-3-2 10:33
    大概记着什么时候学的吗?
    cxxjackie答:没什么印象了,只记得早年自己曾经带过两个弟子,一个叫图灵,一个 ...

    还拜过两个师傅,一个叫李一之,一个叫王恒道!
    回复

    使用道具 举报

  • TA的每日心情
    开心
    2023-2-28 23:59
  • 签到天数: 191 天

    [LV.7]常住居民III

    620

    主题

    5085

    回帖

    5959

    积分

    管理员

    非物质文化遗产社会摇传承人

    积分
    5959

    荣誉开发者管理员油中2周年生态建设者喜迎中秋

    发表于 2022-3-2 14:24:54 | 显示全部楼层
    cxxjackie 发表于 2022-3-2 10:36
    还拜过两个师傅,一个叫李一之,一个叫王恒道!

    哥哥刚进论坛还不是这样的!哈哈哈哈哈哈哈
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

    发表回复

    本版积分规则

    快速回复 返回顶部 返回列表