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

2024-07-11 08:32:41

字体：大中小

来源：转载

供稿：网友

零、概览
CSS2支持的属性选择器用一个表达式[{属性 | 属性 {= | |= | ~=} 值}]
1.[class="a"]只能匹配class="a"的元素
2.[class~="a"]则可以匹配class="a"、class="a b"的元素
3.[lang|=en]则可以匹配lang="en"、lang="en-us"的元素。

CSS3新增*=、^=、$=三种匹配方式[{属性 | 属性 {*= | ^= | $=} 值}]：
1.*=表示模糊匹配，[href="163"]可以匹配href="163.com"、href="mail.163.com"等元素；
2.^=表示以指定字符开头，[href^="/"]则匹配href="/a/a.htm"、href="/b"的元素
3.$=表示以指定字符结尾，[scr$=".png"]则匹配所有png图片，如src="logo.png"

CSS3的属性选择器主要包括以下几种：
1.E[attr]：只使用属性名，但没有确定任何属性值；
2.E[attr="value"]：指定属性名，并指定了该属性的属性值；
3.E[attr~="value"]：指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“?”不能不写；
4.E[attr^="value"]：指定了属性名，并且有属性值，属性值是以value开头的；
5.E[attr$="value"]：指定了属性名，并且有属性值，而且属性值是以value结束的；
6.E[attr*="value"]：指定了属性名，并且有属性值，而且属值中包含了value；
7.E[attr|="value"]：指定了属性名，并且属性值是value或者以“value-”开头的值（比如说zh-cn）;

一、E[attr]：属性选择器是CSS3属性选择器中最简单的一种。如果你希望选择有某个属性的元素，而不论这个属性值是什么，你就可以使用这个属性选择器：

CSS Code复制内容到剪贴板