• CSS 属性选择器(八)


    一、属性选择器

    属性选择使用中括号进行标识,中括号内包含属性名,属性值或者属性表达式

    如h1[title],h1[title="Logon"],

    二、属性选择器分类

    2.1、匹配属性名

     [class]{color:red}

    作用于任何带有class属性的元素,不管理class的值是什么,也可以是其它元素的所有合法属性如:

    img[alt]{border:none};

    上面这个会作用于所有带有alt属性的img元素

    a[href][title]{font-weight:bold};作用于同时带有href和title属性的a元素

    2.2、匹配属性值

     只有当属性完全匹配指定的属性值时,才会应用样式。

    a[href="http://www.baidu.com/"][title="css"]{font-size:12px;}
    
    作用于连接指向http://www.baidu.com/同时title=css的a元素设置字体为12px;
    <a href="http://www.baidu.com/" title="css">百度一下</a>

    也可以综合使用多个条件

    div[id][title="ok"]{color:blue;font-style:italie;}作用于有id属性同时title=ok的div元素

    2.3、前缀匹配

     只要属性值的开始字符匹配指定字符串,即可对元素应用样式。前缀匹配选择器使用[^=]的形式

    <div class="Mytest">前缀匹配</div>
    使用下面来匹配
    [class^="My"]{
    color:red;
    }

    只要class开头为My的元素都可以应用这个样式

    2.4、后缀匹配

     后缀匹配选择器使用[$=]的形式

    <div class="Mytest">后缀匹配</div>
    使用下面来匹配
    [class$="test"]{
    color:red;
    }

    只要class结尾为test的元素都可以应用这个样式

    2.5、模糊匹配

    模糊匹配选择器使用[*=]的形式

    <div class="Mytest">模糊匹配</div>
    使用下面来匹配
    [class*="est"]{
    color:red;
    }

    只要class中有属性中包含est字符串就可以应用这个样式

  • 相关阅读:
    Struts2+Uploadify文件上传使用详解
    jquery常用代码集锦
    springmvc+hibernate入门-揭开神秘的面纱
    Jqgrid入门-Jqgrid格式化数据(九)
    Jqgrid入门-Jqgrid分组的实现(八)
    利用jekyll架设个人博客
    Centos7安装jekyll
    服务器改造个人工作站经验总结
    王爽汇编环境搭建
    由于没有公钥,下列签名无法进行验证
  • 原文地址:https://www.cnblogs.com/liunanjava/p/4388955.html
Copyright © 2020-2023  润新知