CSS属性选择器[attribute~=value]和[attribute*=value]的区别是什么？

发布网友发布时间：2022-04-21 01:20

共5个回答

热心网友时间：2022-04-21 02:49

　　~=其中的value必须是一个独立的单词，例如test-a和test a可以被选中testa不能被选中．
　　*=其中的value只要是值的子串就可以，例如test-a，test a和testa均可以被选中．
　　|=与~=的特性一样，^=与*=的特性一样．因此平时还是用^=和*=较好．

热心网友时间：2022-04-21 04:07

testa，test a，test-a
*=te：属性值包含te的就行
~=te：属性值包含te的并且带空格的，其余两个不能选中（带空格的专用）
^=te：属性值以te开头的就行
|=te：属性值以te开头的并且带 '-' 的，其余两个不能选中（带'-'的专用）
属性值只要全等就都能选中。不管有没有空格或 '-' 。
可以看下《锋利的JQuery》这本书，我就是在这里面学的。网上的网站把选择器不分类，把所有的选择器一股脑的放在一起，看了记不住的。

热心网友时间：2022-04-21 05:42

去W3SCHOOL去看看就有详细的例子了。

热心网友时间：2022-04-21 07:33

妈的，为啥我就打的乱的呢

热心网友时间：2022-04-21 09:41

选择器描述
[attribute]    用于选取带有指定属性的元素。
[attribute=value]    用于选取带有指定属性和值的元素。
[attribute~=value]    用于选取属性值中包含指定词汇的元素。
[attribute|=value]    用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value]    匹配属性值以指定值开头的每个元素。
[attribute$=value]    匹配属性值以指定值结尾的每个元素。
[attribute*=value]    匹配属性值中包含指定值的每个元素。

下面是例子
设置 class 属性值以 "test" 开头的所有元素的背景色：
[class^="test"]
{
background:#ffff00;
}

属性和值选择器 - 多个值
下面的例子为包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值：
[title~=hello] { color:red; }

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