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

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

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

    [LV.1]初来乍到

    10

    主题

    315

    帖子

    402

    积分

    荣誉开发者

    Rank: 10Rank: 10Rank: 10

    积分
    402

    活跃会员热心会员突出贡献三好学生猫咪币纪念章中秋纪念章国庆纪念章

    发表于 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的每日心情
    无聊
    2022-4-18 01:37
  • 签到天数: 30 天

    [LV.5]常住居民I

    302

    主题

    2582

    帖子

    2650

    积分

    荣誉开发者

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

    Rank: 10Rank: 10Rank: 10

    积分
    2650

    猫咪币纪念章

    发表于 2022-3-1 21:00:44 | 显示全部楼层
    在我说话的这一秒之前是你写的
    但是现在归我了!
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

  • TA的每日心情
    无聊
    2022-4-18 01:37
  • 签到天数: 30 天

    [LV.5]常住居民I

    302

    主题

    2582

    帖子

    2650

    积分

    荣誉开发者

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

    Rank: 10Rank: 10Rank: 10

    积分
    2650

    猫咪币纪念章

    发表于 2022-3-1 21:01:24 | 显示全部楼层
    我给哥哥算[油猴脚本开发指南]里行么
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

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

    [LV.1]初来乍到

    10

    主题

    315

    帖子

    402

    积分

    荣誉开发者

    Rank: 10Rank: 10Rank: 10

    积分
    402

    活跃会员热心会员突出贡献三好学生猫咪币纪念章中秋纪念章国庆纪念章

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

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

    使用道具 举报

  • TA的每日心情
    开心
    2022-4-14 00:00
  • 签到天数: 2 天

    [LV.1]初来乍到

    6

    主题

    44

    帖子

    214

    积分

    管理员

    Rank: 10Rank: 10Rank: 10

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

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

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

    使用道具 举报

  • TA的每日心情
    开心
    20 小时前
  • 签到天数: 79 天

    [LV.6]常住居民II

    41

    主题

    352

    帖子

    1277

    积分

    荣誉开发者

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

    Rank: 10Rank: 10Rank: 10

    积分
    1277

    活跃会员三好学生中秋纪念章国庆纪念章热心会员推广达人宣传达人突出贡献猫咪币纪念章

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

    使用道具 举报

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

    [LV.1]初来乍到

    10

    主题

    315

    帖子

    402

    积分

    荣誉开发者

    Rank: 10Rank: 10Rank: 10

    积分
    402

    活跃会员热心会员突出贡献三好学生猫咪币纪念章中秋纪念章国庆纪念章

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

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

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

    使用道具 举报

  • TA的每日心情
    无聊
    2022-4-18 01:37
  • 签到天数: 30 天

    [LV.5]常住居民I

    302

    主题

    2582

    帖子

    2650

    积分

    荣誉开发者

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

    Rank: 10Rank: 10Rank: 10

    积分
    2650

    猫咪币纪念章

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

    大概记着什么时候学的吗?
    cxxjackie答:没什么印象了,只记得早年自己曾经带过两个弟子,一个叫图灵,一个叫冯诺依曼,后来战乱,他俩就不知道干什么去了
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

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

    [LV.1]初来乍到

    10

    主题

    315

    帖子

    402

    积分

    荣誉开发者

    Rank: 10Rank: 10Rank: 10

    积分
    402

    活跃会员热心会员突出贡献三好学生猫咪币纪念章中秋纪念章国庆纪念章

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

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

    使用道具 举报

  • TA的每日心情
    无聊
    2022-4-18 01:37
  • 签到天数: 30 天

    [LV.5]常住居民I

    302

    主题

    2582

    帖子

    2650

    积分

    荣誉开发者

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

    Rank: 10Rank: 10Rank: 10

    积分
    2650

    猫咪币纪念章

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

    哥哥刚进论坛还不是这样的!哈哈哈哈哈哈哈
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

    发表回复

    本版积分规则

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