css属性选择器中[attribute~=value] 和 [attribute*=value]的区别

[attribute]    用于选取带有指定属性的元素。    
[attribute=value]    用于选取带有指定属性和值的元素。    
[attribute~=value]    用于选取属性值中包含指定词汇的元素。    
[attribute|=value]    用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。    
[attribute^=value]    匹配属性值以指定值开头的每个元素。    
[attribute$=value]    匹配属性值以指定值结尾的每个元素。    
[attribute*=value]    匹配属性值中包含指定值的每个元素。   
下面的例子为包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值:
[title~=hello] { color:red; }

下面的例子为带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值:
[lang|=en] { color:red; }

~=其中的value必须是一个独立的单词,例如 [title~=test] 中 test a可以被选中testa不能被选中.

*=其中的value只要是值的子串就可以,例如test-a,test a和testa均可以被选中.

|=与~=的特性一样,^=与*=的特性一样.因此平时还是用^=和*=较好.

时间: 2024-07-31 14:33:41

css属性选择器中[attribute~=value] 和 [attribute*=value]的区别的相关文章

CSS属性选择器

属性选择器 1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <link rel="stylesheet" type="text/css" href="./css/属性选择器.css&qu

css 属性选择器笔记

1.基本选择器: eg: *{margin:0;padding:0} p{color:black} .content{background:red;} #intro{padding-left:2em;} 2.多元素组合选择器 div p { color:#f00; } #nav li { display:inline; } #nav a { font-weight:bold; } div > strong { color:#f00; } h2 + p { color:#f00; } 三.CSS

IE7浏览器下CSS属性选择器二三事

一.为何专门说起IE7 以前,或者说数年前,我们从事桌面端网页开发的时候,基本上都还要兼顾IE6浏览器, 即使有些特性,IE7支持,我们也会忽略之.于是,我们会不自然地把IE6和IE7浏览器归为一路货色,研究的多半是两个浏览器共性的东西,比方说haslayout之类的. 但是,最近1~2年,至少我个人所从事的桌面PC项目都不需要管IE6浏览器(0.3%)了,但是,还是要关心IE7浏览器(3%+)的.虽然,我们有丰富的处理IE6浏览器的经验,但是,当我们不要管IE6浏览器的时候,我们前端技术的选型

css的属性选择器中属性值是区分大小写的。

以前经常看到很多人说"css中通常只有class和id的值区分大小写,属性名和属性值不区分大小写" BLAH BLAH 接手别人项目的时候排了半天bug发现:css的属性选择器对于属性值确实是区分大小写的,而对于属性名却大小写不敏感. 最开始是在querySelectorAll中发现的,测试后发现css中也具有一致的表现. 所以对于过去的那些说法,其实已经不适用于现在的场合了. 测试环境:Chrome 66 , Firefox 57. 另外附上使属性值不区分大小写的写法:https:/

前端学习 -- Css -- 属性选择器

属性选择器:根据元素的属性选择指定元素 语法:[属性名] 选取含有指定属性的元素 [属性名="属性值"]:选取属性值等于指定值的元素 [属性名^="属性值"]:选取属性值以指定内容开头的元素 [属性名$="属性值"]:选取属性值以指定内容结尾的元素 [属性名*="属性值"]:选取属性值中包含指定内容的元素 demo:(注:这么尴尬的诗句肯定不是我写的) <!DOCTYPE html> <html> &l

CSS 属性选择器(八)

一.属性选择器 属性选择使用中括号进行标识,中括号内包含属性名,属性值或者属性表达式 如h1[title],h1[title="Logon"], 二.属性选择器分类 2.1.匹配属性名 [class]{color:red} 作用于任何带有class属性的元素,不管理class的值是什么,也可以是其它元素的所有合法属性如: img[alt]{border:none}; 上面这个会作用于所有带有alt属性的img元素 a[href][title]{font-weight:bold};作用于

css属性选择器*=,|=,^=,$=,*=的区别 (学习笔记)

先上总结: "value是完整单词" 类型的比较符号:  ~=  ,  |= "拼接字符串" 类型的比较符号:  *=  ,  ^=  ,  $= 1.attribute属性中包含value: [attribute~=value] 属性中包含独立的单词为value e.g:[title~=flowerr]  -->  <img src="/i/eg_tulip.jpg" title="tulip flower" /

第45篇 CSS属性选择器

1,内置函数复习 1.1 reduce #reduce 从可迭代对象里面不断的取值累加 from functools import reduce li = [1,2,3,4,5,6] ret = reduce(lambda x,y:x+y,li) print(ret) res = reduce(lambda x,y:x+y,range(1,101)) print(res) 1.2 sorted 1.2.1 按照年龄进行排序 li = [ {'name':'gold','age':'40'}, {

CSS属性选择器温故-4

1.属性选择器就是通过元素属性来找到元素 2.属性选择器语法 CSS3遵循了惯用的编码规则,通配符的使用提高了样式表的书写效率,也使CSS3的属性选择器更符合编码习惯 3.浏览器兼容性 CSS选择器总结:CSS选择器和jQuery的选择器非常相似,学好CSS选择器会让我们学习jQuery事半功倍