css选择器之模糊匹配

最新推荐文章于 2025-09-07 14:59:03 发布

原创最新推荐文章于 2025-09-07 14:59:03 发布 · 1w 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#css

css 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了CSS中三种特殊的选择器：包含特定字符串、以特定字符串开头和以特定字符串结尾的选择器。通过实例展示了如何使用这些选择器精确地定位页面元素，对网页布局和样式调整具有重要意义。

1.
[class*=“icon”]{
…
}

说明：所有class包含"icon"字符串的元素都会被选中

[class*="icon"]{
 	color:red;
 }

<div class="icon-test1">111111</div>
<div class="icon-test2">222222</div>
<div class="aaa icon-test3">333333</div>
<div class="eeeicon">444444</div>

在这里插入图片描述
2.
[class^=“icon”]{
…
}

说明：所有class以"icon"字符串开头的元素都会被选中

[class^="icon"]{
  	color:red;
}

<div class="icon-test1">111111</div>
<div class="icon-test2">222222</div>
<div class="aaa icon-test3">333333</div>
<div class="eeeicon">444444</div>

在这里插入图片描述
3.
[class$=“icon”]{
…
}
说明：所有class以"icon"结尾的元素都会被选中

[class$="icon"]{
  	color:red;
}

<div class="icon-test1">111111</div>
<div class="icon-test2">222222</div>
<div class="aaa icon-test3">333333</div>
<div class="eeeicon">444444</div>

在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Joris要为所欲为

关注关注

5
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

在chrome-console中进行xpath/css/js定位（六）

m0_70618214的博客

06-30

2324

大部分人在使用selenium定位元素时，用的是xpath定位，因为xpath基本能解决定位的需求。css定位往往被忽略掉了，其实css定位也有它的价值，css定位更快，语法更简洁。官方说法，css定位更快，语法更简洁，但是xpath更直观，更好理解一些。这一篇css的定位方法，主要是对比上面的xpath来的，基本上xpath能完成的，css也可以做到。武林至尊，宝刀xpath，css不出，谁与争锋？1.如果一个元素，它的属性不是很明显，无法直接定位到，这时候我们可以先找它老爸（父元素）。

css模糊匹配

weixin_34381666的博客

06-24

1243

2019独角兽企业重金招聘Python工程师标准>>> ...

参与评论您还未登录，请先登录后发表或查看评论

CSS复合选择器使用介绍

09-25

CSS复合选择器包括子选择器、相邻选择器、包含选择器、多层选择器嵌套、属性选择器、伪选择器和伪元素选择器，以上具体的使用如下，感兴趣的朋友可以学习下

CSS属性模糊匹配

csdn565973850的博客

05-23

585

简述CSS属性模糊匹配相关

实现下拉列表的完全模糊匹配功能

热门推荐

chuangxin的专栏

09-23

2万+

转自：http://www.w3school.com.cn/css/css_selector_attribute.asp，属性选择器 根据部分属性值选择如果需要根据属性值中的词列表的某个词进行选择，则需要使用波浪号（~）。假设您想选择 class 属性中包含 i

你不可不知的CSS选择器

12-13

一、五大基本选择符 ...2. #X（ID）#+id名，这是日常常用的css选择器，用于匹配id为XXX的元素，id选择器的优势是精准，高优先级（优先级基数为100，远高于class的10），作为javascript脚本钩子的不二选择，

软件测试入门到精通-第10周-ui自动化测试-css层级选择器+模糊匹配

欢迎来到测试猿的吐槽大会！这里没有鸡汤，只有段子。功能测试：在需求文档里找漏洞，在界面上玩大家来找茬。自动化测试：让代码替我加班，而我负责喝咖啡摸鱼。性能测试：给服务器施压，看它到底能扛几拳。全流程质量守护：从需求评审到上线，一路带刀护送。

07-11

824

🔍 层级选择器家族档案在CSS的世界里，我们有两位性格迥异的侦探：成员代号办案风格口头禅适用案件严格父亲 > 只查直接关系 “必须是我亲生的！” 简单直接的父子结构包容祖先空格查遍整个家族树 “只要是我家的都算！” 复杂多层嵌套结构

详解CSS3中属性选择器新增加的特性

09-24

这些选择器可以根据实际需要灵活运用，大大增强了CSS选择元素的能力。开发者可以根据需求编写更简洁、更有针对性的CSS规则，对HTML文档中的元素进行精确的样式设置。另外，这些属性选择器对于现代Web设计中的一些...

CSS选择器之模糊匹配

undefined--的博客

08-18

8148

<div class='parent'> <div id='div1'/> <div id='div2'/> </div> 如果要设置内部所有div样式；则使用 > 标识符 .parent>div{ //style// } ...

css input模糊,CSS有一个：模糊选择器(伪类)？

weixin_35080040的博客

08-03

613

CSS中没有：blur伪类。dynamic pseudo-classes，像其他伪类，事实上所有其他选择器，表示状态;它们不表示根据文档树的状态之间的事件或转换。焦点：焦点伪类表示焦点对准的元素;它不表示刚接收焦点的元素，也不存在：blur伪类来表示刚失去焦点的元素。类似地，这适用于：hover伪类。虽然它代表一个在其上有一个指针设备的元素，但是对于刚刚被指向的元素，没有一个：mouSEOver伪...

html 模糊匹配,CSS 属性选择器 模糊匹配的使用

weixin_42513814的博客

06-07

1347

转自：http://www.w3school.com.cn/css/css_selector_attribute.asp，属性选择器根据部分属性值选择如果需要根据属性值中的词列表的某个词进行选择，则需要使用波浪号(~)。假设您想选择 class 属性中包含 important 的元素，可以用下面这个选择器做到这一点：p[class~="important"] {color: red;}如果忽略了波...

python css selector_使用python处理selenium中的css_selector定位元素的模糊匹配问题

weixin_39618121的博客

12-08

348

# 匹配id，先指定一个html标签，然后加上“#”符号，再加上id的属性值self.driver.find_element_by_css_selector('div#ID').click()# 匹配class，先指定一个html标签，然后加上“.”符号，再加上class的属性值self.driver.find_element_by_css_selector('div.CLASS').click(...

selenium模糊定位html元素,使用python處理selenium中的css_selector定位元素的模糊匹配問題...

weixin_42429893的博客

06-07

414

# 匹配id，先指定一個html標簽，然后加上“#”符號，再加上id的屬性值self.driver.find_element_by_css_selector('div#ID').click()# 匹配class，先指定一個html標簽，然后加上“.”符號，再加上class的屬性值self.driver.find_element_by_css_selector('div.CLASS').click(...

css正則匹配、模糊匹配

DXsunrise的博客

08-21

1196

//所有class包含font-red的p标签 p[class~="font-red"] {color: red;} [abc^="def"] 选择 abc 属性值以 "def" 开头的所有元素 [abc$="def"] 选择 abc 属性值以 "def" 结尾的所有元素 [abc*="def"] 选择 abc 属性值中包含子串 "def" 的所有元素 //eg //选择cl...

css 属性模糊匹配换行换色

fyinthesky的专栏

11-01

279

属性模糊匹配 "~=" 属性选择器 可以有一个包含大量图像的文档，其中只有一部分是图片。对此，可以使用一个基于 title 文档的部分属性选择器，只选择这些图片 img[title~="Figure"] {border: 1px solid gray;} 这个规则会选择 title 文本包含 "Figure" 的所有图像。没有 title 属性或者 title 属性中不包含 "Figur...

元素定位之CssSelector

wld的博客

02-18

1088

元素定位之CssSelector 一：使用chrome console检查css selector/xpath的有效性【检查】步骤 1. 按F12打开chrome的开发者工具； 2. 再按Esc键调出console，chrome的Elements和Console展示在同一个窗口，便于查看。 3、在Console控制太重输入 ...

css selector 元素定位

qq_20878673的博客

05-29

4628

作为一种具有强大定位功能的元素定位方法，css selector可根据元素任意属性进行定位，又可根据元素位置进行定位，是定位元素的最终解决办法之一。CSS（Cascading Style Sheets）是一种语言，他用来描述HTML和XML文档的表现，CSS使用选择器来为页面元素绑定属性。这些选择器可以被Selenium用作另外的定位策略。CSS可以较为灵活的选择空间的任意属性，一般情况下定位速度比XPth快，CSS选择器常见语法如表所示.CSS选择器的常见语法选择器例子描述.class。

TemplateStyles扩展新特性：增强CSS选择器与匹配器

资源摘要信息: "mediawiki-extensions-TemplateStylesExtender" 是一个Mediawiki扩展，旨在通过引入新的CSS选择器和匹配器来增强TemplateStyles的功能。TemplateStyles是Mediawiki的一个功能，允许用户在模板中直接...