CSS 属性选择器分析

一、[title]:获取有title属性的元素。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>选择器</title>
        <style>            
        [a] { background: red;} /*IE7 √ IE8 √ IE9 √ IE11 √ safari √ firefox √ chrome √*/
        </style>
    </head>
    <body>
        <ul>
            <li a>无序列表第一</li>
            <li>无序列表第二</li>
            <li a>无序列表第一</li>
            <li>无序列表第二</li>
            <li a>无序列表第一</li>
        </ul>
    </body>
</html>

二、[title=W3School]:获取title属性值为W3School的元素。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>选择器</title>
        <style>            
        [title=W3School] { background:#FFE4C4;}/*IE7 √ IE8 √ IE9 √ IE11 √ safari √ firefox √ chrome √*/
        </style>
    </head>
    <body>
        <ul>
            <li title="W3School">无序列表第一</li>
            <li title="11">无序列表第二</li>
            <li title="W3School">无序列表第三</li>
        </ul>
    </body>
</html>

三、[title~=hello]:获取title元素中有hello样式(每个样式用空格分割)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>选择器</title>
        <style>                    
        [title~=hello] { background:red}                
        </style>
    </head>
    <body>
        <ul>
            <li title="hello wrold">无序列表第一</li>
            <li title="hellowrold">title属性中有hello英文，但没有空格区分，所以没有选择到</li>
        </ul>
    </body>
</html>

四、[title|=hello]:用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>选择器</title>
        <style>                    
        [title|=hello] { background:red}                
        </style>
    </head>
    <body>
        <ul>
            <li title="hello-wrold">是单词</li>
            <li title="hello wrold">不为一个单词</li>
        </ul>
    </body>
</html>

五、[title^=hello]:获取title属性值开头是hello的元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>选择器</title>
        <style>                    
        [title^=hello] { background:red}                
        </style>
    </head>
    <body>
        <ul>
            <li title="hello-wrold">hello在开头</li>            
        </ul>
    </body>
</html>

六、[title$=hello]:获取title元素值结尾是hello的元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>选择器</title>
        <style>                    
        [title$=hello] { background:red}                
        </style>
    </head>
    <body>
        <ul>
            <li title="wroldhello">hello在结尾</li>            
        </ul>
    </body>
</html>

七、[title*=hello]:获取title元素值中存在hello的元素。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>选择器</title>
        <style>                    
        [title*=hello] { background:red}                
        </style>
    </head>
    <body>
        <ul>
            <li title="wroldhellowrold">中间有hello</li>            
        </ul>
    </body>
</html>

CSS 属性选择器 分析

CSS 属性选择器分析