以下是IE7中新支持的属性选择符: CSS3
精确属性匹配 [=] : 只有当属性完全匹配指定值的时候, 则会应用该css定义.
存在匹配 []: 只要存在这样的属性, 则应用该css定义.
连字号匹配[|=]: 使用连字号匹配的css定义. 例如: <span abc=”en-us”>dddd</span> 它就能应用 <style>[abc|=”en”] {color:red;}</style>
前缀匹配[^=]: 只有是指定属性以指定字符开始, 则应用该css定义.
子字符串匹配[*=]: 只有指定属性存在指定字符, 则应用该css定义.
后缀匹配[$=]: 只有指定属性以指定字符结尾, 则应用该css定义.
空白分隔匹配[~=]: 是指使用空格或空白间隔的属性值, 则应用该css定义. 例如: <span abc=”ddd here abc”>dddd</span> 它就能应用<style>[abc~=”here”]{color:red;}</style>
CSS3选择符语法概览：原文： http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/
| 选择符类型 | 表达式 | 描述 |
| 子串匹配的属性选择符 | E[att^="val"] | 匹配具有att属性、且值以val开头的E元素 |
| 子串匹配的属性选择符 | E[att$="val"] | 匹配具有att属性、且值以val结尾的E元素 |
| 子串匹配的属性选择符 | E[att*="val"] | 匹配具有att属性、且值中含有val的E元素 |
| 结构性伪类 | E:root | 匹配文档的根元素。在HTML中，根元素永远是HTML |
| 结构性伪类 | E:nth-child(n) | 匹配父元素中的第n个子元素E |
| 结构性伪类 | E:nth-last-child(n) | 匹配父元素中的倒数第n个结构子元素E |
| 结构性伪类 | E:nth-of-type(n) | 匹配同类型中的第n个同级兄弟元素E |
| 结构性伪类 | E:nth-last-of-type(n) | 匹配同类型中的倒数第n个同级兄弟元素E |
| 结构性伪类 | E:last-child | 匹配父元素中最后一个E元素 |
| 结构性伪类 | E:first-of-type | 匹配同级兄弟元素中的第一个E元素 |
| 结构性伪类 | E:only-child | 匹配属于父元素中唯一子元素的E |
| 结构性伪类 | E:only-of-type | 匹配属于同类型中唯一兄弟元素的E |
| 结构性伪类 | E:empty | 匹配没有任何子元素（包括text节点）的元素E |
| 目标伪类 | E:target | 匹配相关URL指向的E元素 |
| UI元素状态伪类 | E:enabled | 匹配所有用户界面（form表单）中处于可用状态的E元素 |
| UI元素状态伪类 | E:disabled | 匹配所有用户界面（form表单）中处于不可用状态的E元素 |
| UI元素状态伪类 | E:checked | 匹配所有用户界面（form表单）中处于选中状态的元素E |
| UI元素状态伪类 | E::selection | 匹配E元素中被用户选中或处于高亮状态的部分 |
| 否定伪类 | E:not(s) | 匹配所有不匹配简单选择符s的元素E |
| 通用兄弟元素选择器 | E ~ F | 匹配E元素之后的F元素 |
什么是CSS属性选择符？
CSS提供了一种以链接特别属性为基础的样式元素而非类元素。举例来说，你已经知道，你可以定义标题标签样式：
- h1 { color: blue; }
但你实际真正获取的具体样式，只是标题标签属性中的一个title属性。
- h1[title] { color: blue; }
你可以籍此更进一步,为此属性赋一个具体的值。
- h1[title="Go Home"] { color: blue; } /* 确定值为title属性中的"Go Home" */
- h1[title~="Go Home"] { color: red; } /* 其值为title属性某处的"Go Home" */
- h1[title^="Go Home"] {color: green; } /* 其值从title属性的标签头加上"Go Home"开始 */
邮箱链接有何与众不同之处？
邮箱链接区别于其它超链接是因为它总是从“mailto：”开始，从而命令浏览器凭此提示来操作系统，用默认程序软件将用户想要发送的邮件寄到指定邮箱。所以我们可以利用两者之间的相似性，运用CSS样式只针对邮箱链接进行定义。
- a[href^="mailto"] { color: blue; }
这里的所有链接“href”打开都将默认为从“mailto：”开始。
完成样式
现在我们除了把这些链接定义成了蓝色外还可以做更多。我们可以利用CSS技术的另一强项：“content”属性。“content”允许你添加加内容到页面元素，此“content”是你原本并未使用的它的固有属性。使用伪标签选择器，你可以指定内容加在之前还是之后。
当链接处于悬停状态时，让我们随意地分离众多链接并在它们后面添加“title”属性。
- a[href^="mailto"]:hover:after { content: attr(title); }
有效果了，但它直接加到了链接文本的后面，所以我们必须让格式看起来更美观。添加一个空格间隙和“>”符号来区别翻转时链接文本和加入的文本内容。
- a[href^="mailto"]:hover:after { content: " > " attr(title); }
<HTML>
<HEAD>
<TITLE>CSS3: Attribute Selectors</TITLE>
<style>
.test {color: green;display: none;}
.fail {color: red;}
[special] {display: block;}
[attr=”Value”] {display: block;}
[attr^=”B”] {display: block;}
[attr$=”n”] {display: block;}
[attr*=”ai”] {display: block;}
[attr|=”en”] {display: block;}
[attr~=”Two”] {display: block;}
[ {display: none;}
</style>
</HEAD>
<BODY>
<h1>CSS3: Attribute Selectors</h1>
<h2>Attribute Selector Tests</h2>
<div special>1. Test for [] (Existence) succeeded.</div>
<div attr=”Value”>2. Test for [=] (Value) succeeded.</div>
<div attr=”Blue”>3. Test for [^=] (Prefix) succeeded.</div>
<div attr=”Green”>4. Test for [$=] (Suffix) succeeded.</div>
<div attr=”Contains”>5. Test for [*=] (Substring) succeeded.</div>
<div attr=”en-us”>6. Test for [|=] (Hyphen) succeeded.</div>
<div attr=”One Two Three”>7. Test for [~=] (Token) succeeded.</div>
<div selector tests failed.</div>
</BODY>
</HTML>
CSS2属性选择器 语法：
1. E1[attr]
2. E1[attr=value]
3. E1[attr~=value]
4. E1[attr|=value]
说明：
1. 选择具有attr属性的E1
2. 选择具有attr属性且属性值等于value的E1
3. 选择具有attr属性且属性值为一用空格分隔的字词列表，其中一个等于value的E1。这里的value不能包含空格
4. 选择具有attr属性且属性值为一用连字符分隔的字词列表，由value开始的E1
目前IE5.5+尚不支持此种选择符。
460
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
