mozilla
您的搜索结果

    属性选择器

    概述

    属性选择器通过已经存在的属性名或属性值匹配元素.

    [attr]
    表示以 attr 命名的属性名的元素.
    [attr=value]
    表示以 attr 命名的属性名,且该属性的值为"value"的元素.
    [attr~=value]
    表示以 attr 命名的属性名,且该属性的值是一个以空格作为分隔的值列表,其中一个值为"value"的元素.
    [attr|=value]
    表示以 attr 命名的属性名,且该属性的值是一个以连字符作为分隔的值列表,其中一个值为"value"的元素.它可以作为语言子串匹.
    [attr^=value]
    表示以 attr 命名的属性名,且该属性的值是以"value"开头的元素.
    [attr$=value]
    表示以 attr 命名的属性名,且该属性的值是以"value"结尾的元素.
    [attr*=value]
    表示以 attr 命名的属性名,且该属性的值中至少包含一个以"value"作为子串的元素.

    Examples

    <style type="text/css">
        /* 所有具有"lang"属性的 span 元素的字体加粗 */
        span[lang] {font-weight:bold;}
     
        /* 所有具有"lang"属性,且值为"pt"的 span 元素的字体为绿色 */
        span[lang="pt"] {color:green;}
    
        /* 所有具有"lang"属性,且值为"en-us"的 span 元素的字体为蓝色*/
        span[lang~="en-us"] {color: blue;}
    
        /* 任意具有"lang"属性,且值带有"zh"字符串的 span 元素的字体为红色, 它会匹配简体中文(zh-CN)以及繁体中文(zh-TW) */
        span[lang|="zh"] {color: red;}
    
        /* 所有内部链接背景都为金色 */
        a[href^="#"] {background-color:gold}
    
        /* 所有以".cn"结尾的链接字体都为红色 */
        a[href$=".cn"] {color: red;}
    
        /* 所有带有"example"的链接背景都为灰色 */
        a[href*="example"] {background-color: #CCCCCC;}
    </style>

    上面的CSS作用于下面的HTML时:

    <div class="hello-example">
        <a href="http://example.com">English:</a>
        <span lang="en-us en-gb en-au en-nz">Hello World!</span>
    </div>
    <div class="hello-example">
        <a href="#portuguese">Portuguese:</a>
        <span lang="pt">Olá Mundo!</span>
    </div>
    <div class="hello-example">
        <a href="http://example.cn">Chinese (Simplified):</a>
        <span lang="zh-CN">世界您好!</span>
    </div>
    <div class="hello-example">
        <a href="http://example.cn">Chinese (Traditional):</a>
        <span lang="zh-TW">世界您好!</span>
    </div>
    

    则会产生这样的效果:

    English: Hello World!

    Portuguese: Olá Mundo!

    Chinese (Simplified): 世界您好!

    Chinese (Traditional): 世界您好!

    规范

    Specification Status Comment
    CSS Selectors Level 3 Recommendation  
    CSS 2.1 Recommendation  
    CSS 1 Recommendation  

    浏览器兼容性

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Basic support (Yes) 1.0 (1.7 or earlier) 7 9 3
    Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Basic support ? ? 1.0 (1) ? ? ?

    参考

    文档标签和贡献者

    此页面的贡献者有: alimon, teoli
    最后编辑者: teoli,