14.9.5 CSS E[att^=val] 属性值子串选择符

E[att^=val] -- CSS E[att^=val]属性值子串选择符，匹配文档中具有att属性且其值的前缀为val的E元素
  • 语法: E[att^=val]
    • E -- 元素
    • att -- 属性
    • val -- 属性值
  • 引用网址：http://www.dreamdu.com/css/selector_attribute_values_prefix/
  • 说明：
    • 匹配文档中元素具有属性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

CSS E[att^=val] 属性值子串选择符示例 -- 可以尝试编辑

浏览器兼容性

CSS E[att^=val] 属性值子串选择符浏览器兼容性
选择符 IE6 IE7 IE8 IE9 FF CH OP SA
E[att^=val] no yes yes yes yes yes yes yes
From "CSS E[att^=val] 属性值子串选择符 - CSS属性选择符 - CSS选择符 - CSS教程"


  • 教程中有什么不懂的地方？发现教程的错误！对教程有什么建议！快快给我留言呀 给猴子留言，我会尽快解答你的问题:)
  • HTML代码