首页 > 网站 > WEB开发 > 正文

css属性选择器

2024-04-27 15:03:45
字体:
来源:转载
供稿:网友

CSS2引入了属性选择器,它可以根据元素的属性以及属性值来选择元素。共有4中类型的属性选择器:

1. 简单属性选择

<h1 class=""></h1>h1[class] {}<planet moons=""></planet>planet[moons] {}<img alt="" />img[alt] {}*[title] {}a[href][title] {}

2、根据具体属性值选择

a[href="..."] {}planet[moons=""] {}a[href=""] {}

这种格式要求必须与属性值完全匹配

3、根据部分属性值选择

p[class~=""] {}img[title~="Figure"] {}

这个规则会选择title文本包含Figure的所有图象。因此,只要图片有“Figure”的title文本,就能匹配(Figure 位置不限)。

还有一个更高级的css选择模块,这是在css2完成之后发布的,其中包含更多的部分属性值选择器(或者按规范的说法,称之为“子串匹配属性选择器”)。这些属性选择器在很多现代浏览器中都得到了支持,包括IE7。

[foo^="bar"] 选择foo属性值以"bar"开头的所有元素[foo$="bar"] 选择foo属性值以"bar"结尾的所有元素[foo*="bar"] 选择foo属性值中包含子串"bar"的所有元素

4、特殊属性选择类型

*[lang|="en"] {}这个规则会选择lang属性等于en或者以en-开头的所有元素,如en、en-us、en-auimg[src|="figure"] {}这个规则会匹配形如figure-1.gif和figure-3.jpg
上一篇:NPM更新

下一篇:2.HTML5语义标签

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表