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>

查看全文

相关阅读:
浅析@Deprecated
微信小程序开发系列一：微信小程序的申请和开发环境的搭建
 HTTP 200 OK和HTTP 304 Not modified的由来
 深入理解Java的整型类型：如何实现2+2=5？
聊聊JavaScript和Scala的表达式 Expression
Java异常处理：如何写出“正确”但被编译器认为有语法错误的程序
 如何在ABAP里用函数式编程思想打印出非波拉契Fibonacci（数列）
使用JavaScript ES6的新特性计算Fibonacci（非波拉契数列）
JavaScript面试系列：JavaScript设计模式之桥接模式和懒加载
 Cordova应用的JavaScript代码和自定义插件代码的调试

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

CSS 属性选择器 分析

CSS 属性选择器分析