zoukankan html css js c++ java

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>

查看全文

相关阅读:
动态规划最长公共子序列 LCS,最长单独递增子序列，最长公共子串
 梳排序(Comb sort)
地精排序(Gnome Sort) 算法
 vs2010 调试调用堆栈窗口
 vs2010 条件断点 has changed是什么意思？
vs2010根据字符串内容添加断点
 vs2010 调试中监视变量
 vs2010断点使用技巧
 区间重合判断（pojg校门外的树）
转:Linus：利用二级指针删除单向链表

原文地址：https://www.cnblogs.com/ChivanTam/p/5546041.html

CSS 属性选择器 分析

CSS 属性选择器分析