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

转自：

http://www.w3school.com.cn/css/css_selector_attribute.asp，属性选择器

根据部分属性值选择

如果需要根据属性值中的词列表的某个词进行选择，则需要使用波浪号(~)。

假设您想选择 class 属性中包含 important 的元素，可以用下面这个选择器做到这一点：

p[class~="important"] {color: red;}

如果忽略了波浪号，则说明需要完成完全值匹配。

部分值属性选择器与点号类名记法的区别

该选择器等价于我们在类选择器中讨论过的点号类名记法。

也就是说，p.important 和 p["important"] 应用到 HTML 文档时是等价的。

那么，为什么还要有 "~=" 属性选择器呢？因为它能用于任何属性，而不只是 class。

例如，可以有一个包含大量图像的文档，其中只有一部分是图片。对此，可以使用一个基于 title 文档的部分属性选择器，只选择这些图片：

img[title~="Figure"] {border: 1px solid gray;}

这个规则会选择 title 文本包含 "Figure" 的所有图像。没有 title 属性或者 title 属性中不包含 "Figure" 的图像都不会匹配。

注意：部分值属性选择器，这里的值一定是个完整的word,比如本处的Figure，若使用img[title~="Figu"] {border: 1px solid gray;}则css失效，部分匹配失败。

子串匹配属性选择器

下面为您介绍一个更高级的选择器模块，它是 CSS2 完成之后发布的，其中包含了更多的部分值属性选择器。按照规范的说法，应该称之为“子串匹配属性选择器”。

很多现代浏览器都支持这些选择器，包括 IE7。

下表是对这些选择器的简单总结：

类型

描述

[abc^="def"]

选择 abc 属性值以 "def" 开头的所有元素

[abc$="def"]

选择 abc 属性值以 "def" 结尾的所有元素

[abc*="def"]

选择 abc 属性值中包含子串 "def" 的所有元素

可以想到，这些选择有很多用途。

举例来说，如果希望对指向 W3School 的所有链接应用样式，不必为所有这些链接指定 class，再根据这个类编写样式，而只需编写以下规则：

a[href*="w3school.com.cn"] {color: red;}

感叹：强大的属性模糊匹配呀。

html 模糊匹配,CSS 属性选择器模糊匹配的使用相关推荐

css 选择href属性值,巧用CSS属性值正则匹配选择器(小技巧)
属性值正则匹配选择器包括下面3种: [attr^="val"] [attr$="val"] [attr*="val"] 这3种属性选择器是字 ...
图标选择器_【小技巧】巧用CSS属性值正则匹配选择器
属性值正则匹配选择器包括下面3种: [attr^="val"] [attr$="val"] [attr*="val"] 这3种属性选择器是字 ...
【译】使用这些 CSS 属性选择器来提高前端开发效率！
译者:前端小智原文:www.smashingmagazine.com/2018/10/att- 属性选择器非常神奇.它们可以使你摆脱棘手的问题,帮助你避免添加类,并指出代码中的一些问题.但是不要担心 ...
a标签download属性无效_使用这些 CSS 属性选择器来提高前端开发效率
如题.但是不要担心,虽然属性选择器非常复杂和强大,但是它们很容易学习和使用.在本文中,我们将讨论它们是如何运行的,并给出一些如何使用它们的想法.通常将 HTML属性放在方括号中,称为属性选择器,如下: ...
教你玩转CSS 属性选择器
目录具有特定属性的HTML元素样式属性选择器属性和值选择器属性和值的选择器 - 多值表单样式 CSS 属性选择器具有特定属性的HTML元素样式具有特定属性的HTML元素样式不仅仅是cl ...
css 属性选择器笔记
1.基本选择器: eg: *{margin:0;padding:0}p{color:black}.content{background:red;}#intro{padding-left:2em;} 2 ...
php 分析css,全面分析css属性选择器
1.[class~="flower"]:选中有flower的class class="flower ss" class="ss flower" ...
css属性选择器，[]，=， ~=， ^=， ~=， $=， |=等符号含义
全栈工程师开发手册 (作者:栾鹏) css系列教程1-选择器全解 css属性选择器包括[]是否有某属性,=属性是否等于,~=属性包含,^=属性值以指定字符串开头,$=属性值以指定字符串结尾,*=属性 ...
P14-前端基础-CSS属性选择器
P14-前端基础-CSS属性选择器 1.属性选择器案例 <!DOCTYPE html> <html><head><meta charset="UTF ...
7、CSS 属性选择器
对带有指定属性的 HTML 元素设置样式. 可以为拥有指定属性的 HTML 元素设置样式,而不仅限于 class 和 id 属性. 注释:只有在规定了 !DOCTYPE 时,IE7 和 IE8 才支持 ...

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

html 模糊匹配,CSS 属性选择器模糊匹配的使用相关推荐

最新文章

热门文章

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

html 模糊匹配,CSS 属性选择器 模糊匹配的使用相关推荐

最新文章

热门文章

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

html 模糊匹配,CSS 属性选择器模糊匹配的使用相关推荐