WonderCSS

了解CSS属性选择器

有时在样式表里你或许会看到一些“奇怪”的属性,比如会出现:[ ^ $ 等特殊符号,这就是CSS属性选择器。属性选择器其实在CSS2时就已经推出了,但平时用的时候比较少,就个人而言他少到竟忘了用的地步。真是遗憾。CSS属性选择器是相当奇妙的,当然这种奇妙不是IE6能理解的。下面让我们来了解一下它吧。

CSS属性选择器主要作用就是对带有指定属性的HTML元素设置样式,相对于在样式表里多了一层判断。他让CSS和HTML链接的更紧密。它的基本写法如下:

E [attr="value"]:

attr为属性名称,value为属性值。简单又直观的说,我们常写的方式如 h1#title 用CSS属性选择器就可以这么写: h1[id="title"]

CSS3的属性选择器主要包括以下几种:

E [attr]: 只使用属性名,但没有确定任何属性值;
E [attr=”value”]: 指定属性名,并指定了该属性的属性值;
E [attr~=”value”]: 指定属性名,并且具有属性值,此属性值是一个词列表,并且以空格隔开,其中词列表中包含了一个value词,而且等号前面的“~”不能不写;
E [attr^=”value”]: 指定了属性名,并且有属性值,属性值是以value开头的;
E [attr$=”value”]: 指定了属性名,并且有属性值,而且属性值是以value结束的;
E [attr*=”value”]: 指定了属性名,并且有属性值,而且属值中包含了value;
E [attr|=”value”]: 指定了属性名,并且属性值是value或者以“value-”开头的值(比如说zh-cn);

例1 #head [class^="logo"] 作用于 <div id="head"><span class="logo-name"></span></div> 内的 <span class="logo-name">上。

例2 a[href="http://www.wondercss.com/"][title="wonder css"] {color:red;} 作用于 <a href="http://www.wondercss.com/" title="wonder css">网站首页</a>

看似复杂,但若真了解到他的奇妙你会发现CSS不只是“样式表”那么简单!

By 于湛 发布于 2013.02.19 2,650 次浏览

了解CSS属性选择器》上有3条评论

  1. Pingback引用通告: 无需 JS 制作纯 CSS 子菜单 | WonderCSS

  2. Pingback引用通告: 让我们来了解20个常用CSS选择器吧 | WonderCSS

发表评论

电子邮件地址不会被公开。 必填项已用*标注