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>

查看全文

相关阅读:
Nginx配置文件nginx.conf中文详解（转）
windows Nginx基本使用方法
 phpstorm 找到文件修改历史
 微信小程序模拟点击出现问题解决方法
 设置头像、商品、轮播图为背景图时需要的css
div左右居中css
自定义方形复选框
 css 调转180度：transform: rotate(180deg);
js字符串转数字（小数），数字转字符串
 腾讯地图key秘钥

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

CSS 属性选择器 分析

CSS 属性选择器分析