• css3中追加的三种选择器


    1.css3追加的3中选择器:[att*=val],[att^=val],[att$=val]

    2.[att*=val]
    *是通配符,表示只要字符串中出现了这个val的(哪怕val只是一部分),如这个例子:[class*=div]:表示凡是div这个类都会出现效果(包含即可,不论是sdfasdiv还是divsfas)。
    比如下面的代码:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
    [class*=div]{
        color:#00F;}
    </style>

    </head>

    <body>
    <div class=div1>
    i'm a student
    </div>
    <div class=div2>
    i'm a student
    </div>
    <div class=div3>
    i'm a student
    </div>
    <div class=di>
    i'm a student
    </div>
    </body>
    </html>


    3.[att^=val]:表示首字母串是val的会出现效果,比如下面的例子:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
    [class^=div]{
        color:#0F0}
    </style>

    </head>

    <body>
    <div class=1div1>
    i'm a student
    </div>
    <div class=2div2>
    i'm a student
    </div>
    <div class=div3>
    i'm a student
    </div>
    <div class=di>
    i'm a student
    </div>
    </body>
    </html>

    4.[att$=val]:表示结束字母串是val的出现效果,如下面这个例子:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
    [class$=i]{
        color:#0F0}
    </style>

    </head>

    <body>
    <div class=1div1>
    i'm a student
    </div>
    <div class=2div2>
    i'm a student
    </div>
    <div class=div3>
    i'm a student
    </div>
    <div class=di>
    i'm a student
    </div>
    </body>
    </html>
    本博客基于网络课程完成,旨在学习,有错误请指正!
  • 相关阅读:
    MSDTC服务出错
    jquery.lazyload.js实现图片延迟加载——wordpress图片随滚动条渐显效果
    js:警惕firstChild
    基于jquery的表格排序
    jquery JSON的解析方式
    用JS jquery取float型小数点后两位
    JQuery之append和appendTo的区别,还有js中的appendChild用法
    js笔记之Math random()、ceil()、floor()、round()
    Oracle笔记
    STL: equal
  • 原文地址:https://www.cnblogs.com/comefuture/p/8305989.html
Copyright © 2020-2023  润新知