a[title]所有具有title属性的a标签将显示红色的文字，并显示蓝色边框E[att=val] -- CSS E[att=val] 属性值选择符，匹配文档中具有att属性且其值为val的E元素语法: E[att=val]
{
color:red;
border: 1px solid blue;
}
input[type]
{
border: 1px solid blue;
background: green;
}
a[title="dreamdu"]所有title值为dreamdu的a标签的文字颜色将显示红色
{
color:red;
}
input[type="text"]
{
background: green;
color: white;
border: 1px solid blue;
}
input[type="password"]
{
background: blue;
color: white;
border: 1px solid green;
}
*[title="dreamdu"][href="http://www.南方网景/"]只有title为dreamdu和href为http://www.南方网景/的标签，文字才显示粉色
{
color: pink;
border: 1px solid blue;
}
E[att~=val] -- CSS E[att~=val] 属性值选择符，匹配文档中具有att属性且其中一个值（多个值使用空格分隔）为val(val不能包含空格)的E元素
语法: E[att~=val]
E -- 元素
att -- 属性
val -- 属性值
说明：匹配文档中元素的属性att的其中一个值（多个值使用空格分隔）为val的元素(val不能包含空格)，例如a[title~=dreamdu]选择符，表示具有title属性且其中一个值为dreamdu的a元素。att，是attribute的缩写，中文"属性"。val，是value的缩写，中文"值"
示例
a[title~="dreamdu"]
{
color:red;
}
<a href="http://www.南方网景/" title="www dreamdu com">红色</a>
title属性包含三个值（多个值使用空格分隔），其中一个为dreamdu，因此可匹配样式E[att|=val] -- CSS E[att|=val] 属性值选择符，匹配文档中具有att属性且其中一个值为val，或者以val开头紧随其后的是连字符-的E元素（主要用来允许语言编码的匹配，例如HTML中的hreflang属性。关于lang（或 xml:lang）语言码的匹配，可查看:lang伪类）
语法: E[att|=val]
E -- 元素
att -- 属性
val -- 属性值
说明：匹配文档中元素的属性att的值为val，或者以val开头紧随其后的是连字符-的元素，例如a[hreflang|="en"]选择符，表示具有hreflang属性且值为en或en开头后加"-"（例如：en-US）的a元素
att，是attribute的缩写，中文"属性"。val，是value的缩写，中文"值"
示例
*[lang|="en"]
{
color: red;
}
*[lang|="zh"]
{
color: blue;
}
<p lang="en">红色</p>
<p lang="en-US">红色</p>
<p lang="zh">蓝色</p>
E[att^=val] -- CSS E[att^=val]属性值子串选择符，匹配文档中具有att属性且其值的前缀为val的E元素
语法: E[att^=val]
E -- 元素
att -- 属性
val -- 属性值
说明：匹配文档中元素具有属性att，且其值的前缀为val的元素，例如a[href^="https://"]选择符，匹配具有href属性且值的前缀为https://的a元素属性值必须是CSS标示符或字符串。att，是attribute的缩写，中文"属性"。val，是value的缩写，中文"值"
推荐: 如果字符串A是字符串B的一部分，我们将A称为B的子串。CSS属性子串选择符可以通过一个字符串是否出现在另一个字符串前面、后面或之间的任意部分匹配样式
示例
a[href^="mailto"]
{
color: green;
background: url(/images/css/icon-mail.png) center right no-repeat;
}
a[href^="https://"]
{
color:red;
background: url(/images/css/icon-ssl.png) center right no-repeat;
}
a[href^="ftp://"]
{
color:gold;
background: url(/images/css/icon-file.png) center right no-repeat;
}
上面示例根据不同的链接协议匹配不同的样式图片，此示例中的图片选自mediawiki
E[att$=val] -- CSS E[att$=val] 属性值子串选择符，匹配文档中具有att属性且其值的后缀为val的E元素
语法: E[att$=val]
E -- 元素
att -- 属性
val -- 属性值
说明：匹配文档中元素具有属性att，且其值的后缀为val的元素，例如a[href$=".html"]选择符，表示具有href属性且值以.html结尾的a元素，属性值必须是CSS标示符或字符串。att，是attribute的缩写，中文"属性"。val，是value的缩写，中文"值"
推荐: 如果字符串A是字符串B的一部分，我们将A称为B的子串。CSS属性子串选择符可以通过一个字符串是否出现在另一个字符串前面、后面或之间的任意部分匹配样式。
示例
a[href$=".html"]
{
color:red;
}
a[href$=".php"]
{
color:green;
}
a[href$=".jsp"]
{
color:blue;
}
为不同的链接文件匹配不同的样式
E[att*=val] -- CSS E[att*=val] 属性值子串选择符，匹配文档中具有att属性且其包含val的E元素
语法: E[att*=val]
E -- 元素
att -- 属性
val -- 属性值
说明：匹配文档中元素具有属性att，且其值包含val的元素，例如a[href*=".php"]选择符，表示具有href属性且值包含.php的a元素
属性值必须是CSS标示符或字符串。att，是attribute的缩写，中文"属性"。val，是value的缩写，中文"值"
推荐: 如果字符串A是字符串B的一部分，我们将A称为B的子串。CSS属性子串选择符可以通过一个字符串是否出现在另一个字符串前面、后面或之间的任意部分匹配样式
示例
a[href*=".html"]
{
color:red;
}
a[href*=".php"]
{
color:green;
}
a[href*=".jsp"]
{
color:blue;
}
<a href="http://www.dreamdu.com/css.html?id=1&name=www">红色字体</a>
<a href="http://www.dreamdu.com/css.php?id=2&name=dreamdu">绿色字体</a>
<a href="http://www.dreamdu.com/css.jsp?id=3&name=com">蓝色字体</a>
由于多数动态网页的网址后都有参数，因此可以使用[att*=val]匹配动态网页的样式
相关CSS属性选择符