CSS 属性选择器 (CSS 2.1)

评论(0)

顺着上次的CSS 中的选择器 (二)- 组合选择器开始往下来,因为目前大部分的IE浏览器还停留在 CSS3 之前的标准,所以属性选择器今天先讲讲 CSS2.1的。

CSS 2.1 属性选择器列表

选择器

含义

示例

A[att]

匹配所有具有att属性的E元素,不考虑它的值。(注意:A在此处可以省略,比如“[cheacked]”。以下同。)

p[title] { color:#f00; }

A[att=val]

匹配所有att属性等于“val”的E元素

div[class=”error”] { color:#f00; }

A[att~=val]

匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的AE元素

td[class~=”name”] { color:#f00; }

A[att|=val]

匹配所有att属性具有多个连字号分隔(hyphen-separated)的值、其中一个值以“val”开头的A元素,主要用于lang属性,比如“en”、“en-us”、“en-gb”等等

p[lang|=en] { color:#f00; }

CSS 2.1 属性选择器还有一个特点就是使用多个选择器,即可以组合属性选择器:blockquote[class=quote][cite] { color:#f00; }

含有指定属性选择器

p[title] { color:#f00; }
上面给的这个例子不是很好,因为要演示我们把他升华一下。

div#test1[id]{
padding:10px;
background-color:#ffffff;
border:1px #000000 solid;
color:red;
}
<div id="test1" class="test1">span#test1</div>

演示:


span#test1

指定属性值选择器

 
div[class="allgood"] { 
padding:10px;
background-color:#ffffff;
border:1px #000000 solid;
color:red;
}
<div class="allgood">div.allgood</div>

演示



div.allgood

指定部分属性选择器

div[class~="xiangzi"] { 
padding:10px;
background-color:#ffffff;
border:1px #000000 solid;
color:red;
 }
<div class="allgood xiangzi">div.allgood/xiangzi</div>

演示


div.allgood/xiangzi

总结

第四个不太好演示,暂不演示了,
从css2.1开始我们可用的选择器不断增多,
网页元素多样化的渲染也就越来越到,
相信到css3和HTML5普及的时候,我们会有更缤纷的网页。





转载请注明转自: CSS 属性选择器 (CSS 2.1)