精华内容
下载资源
问答
  • 属性选择器

    千次阅读 2018-05-09 07:52:02
    1.E[att^=value]属性选择器  E[att^=value]属性选择器是指选择名称为E的标记,且该标记定义了att属性,att属性值包含前缀为value的子字符串。需要注意的是E是可以省略的,如果省略则表示可以匹配满足条件的任意...

    1.E[att^=value]属性选择器

        E[att^=value]属性选择器是指选择名称为E的标记,且该标记定义了att属性,att属性值包含前缀为value的子字符串。需要注意的是E是可以省略的,如果省略则表示可以匹配满足条件的任意元素。例如,div[id^=section]表示匹配包含id属性,且id属性值是以“section”字符串开头的div元素。

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>E[att^=value]属性选择器的应用</title>
    <style type="text/css">
    p[id^="one"]{
    	color:pink;
    	font-family:"微软雅黑";
    	font-size:20px;	
    }
    </style>
    </head>
    <body>
    <h2>春望</h2>
    <p id="one">国破山河在,城春草木深。</p>
    <p id="two">感时花溅泪,恨别鸟惊心。</p>
    <p id="one1">烽火连三月,家书抵万金。</p>
    <p id="two1">白头搔更短,浑欲不胜簪。</p>
    </body>
    </html>

        只要p元素中的id属性值是以“one”字符串开头就会被选中,从而呈现特殊的文本效果。

    2.E[att$=value]属性选择器

        E[att$=value]属性选择器是指选择名称为E的标记,且该标记定义了att属性,att属性值包含后缀为value的子字符串。与E[att^=value]选择器一样,E元素可以省略,如果省略则表示可以匹配满足条件的任意元素。例如,div[id$=section]表示匹配包含id属性,且id属性值是以“section”字符串结尾的div元素。

     

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>E[att$=value]属性选择器的应用</title>
    <style type="text/css">
    p[id$="main"]{
    	color:#0cf;
    	font-family:"宋体";
    	font-size:20px;
    }
    </style>
    </head>
    <h2>春夜喜雨</h2>
    <p id="old1">好雨知时节,当春乃发生。</p>
    <p id="old2">随风潜入夜,润物细无声。</p>
    <p id="oldmain">野径云俱黑,江船火独明。</p>
    <p id="newmain">晓看红湿处,花重锦官城。</p>
    <body>
    </body>
    </html>
    

        只要p元素中的id属性值是以“main”字符串结尾就会被选中,从而呈现特殊的文本效果。

    3.E[att*=value]属性选择器

        E[att*=value]属性选择器用于选择名称为E的标记,且该标记定义了att属性,att属性值包含value子字符串。该选择器与前两个选择器一样,E元素也可以省略,如果省略则表示可以匹配满足条件的任意元素。例如,div[id*=section]表示匹配包含id属性,且id属性值包含“section”字符串的div元素。

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>E[att*=value]属性选择器的使用</title>
    <style type="text/css">
    p[id*="demo"]{
    	color:#0ca;
    	font-family:"宋体";
    	font-size:20px;	
    }
    </style>
    </head>
    <body>
    <h2>使至塞上</h2>
    <p id="demo1">单车欲问边,属国过居延。</p>
    <p id="main1">征蓬出汉塞,归雁入胡天。</p>
    <p id="newdemo">大漠孤烟直,长河落日圆。</p>
    <p id="olddemo">萧关逢候骑,都护在燕然。</p>
    </body>
    </html>

        只要p元素中的id属性值包含“demo”字符串就会被选中,从而呈现特殊的文本效果。

    展开全文
  • 属性选择器从存在和值属性选择器、子串值属性选择器这两个部分来讲 1.存在和值属性选择器 1)[attr]:该选择器选择有attr属性的所有元素,不管attr的属性值是什么 2)[attr=val]:该选择器仅选择attr属性值是val的...

    属性选择器

    属性选择器从存在和值属性选择器、子串值属性选择器这两个部分来讲
    1.存在和值属性选择器
    1)[attr]:该选择器选择有attr属性的所有元素,不管attr的属性值是什么
    2)[attr=val]:该选择器仅选择attr属性值是val的所有元素
    3)[attr~=val]:该选择器选择attr属性的元素,且attr的属性值是以val的属性值列表,列表以空格隔开
    说什么都没有代码来的直接,代码如下:

    <style>
        div {
            float: left;
            width: 50px;
            height: 50px;
            margin-right: 2px;
        }
        /* 选择有name属性的元素 */
        [name] {
            border: 1px solid red;
        }
        /* 选择有xxxx属性的元素 */
        [xxxx] {
            border: 1px solid green;
        }
        /* 选择name属性且属性值是aa的所有元素 */
        [name = 'aa'] {
            background: grey;
        }
        /* 选择xxx属性且属性值为以空格隔开的值列表中有xx的元素 */
        [xxx ~= 'xx'] {
            border: 2px solid yellow;
        }
    </style>
    <body>
        <div name='aa'>aa</div>
        <div name='aa'>aa1</div>
        <div name='bb'>bb</div>
        <div name='cc'>cc</div>
        <div xxxx='xxxx'>xxxx</div>
        <div xxx='xx bb'>xx</div>
        <div xxx='aa aa'>xxxx</div>
    </body>
    

    结果图如图所示:
    结果图
    2.子串值属性值选择器
    1)[attr |= val]:该选择器选择attr属性值是val(包括val)或者以val-开头的元素
    2)[attr ^= val]:该选择器选择attr属性值是val开头(包括val)的元素
    3)[attr $= val]:该选择器选择attr属性值是val结尾(包括val)的元素
    4)[attr *= val]:该选择器选择attr属性值包含val字符串的元素
    直接上代码来的直观

    <style>
        div {
            float: left;
            width: 50px;
            height: 50px;
            margin-right: 5px;
        }
        /* 选择attr属性是以aa或者以aa-开头的元素 */
        [name |='aa'] {
            border: 1px solid red;
        }
        /* 选择attr属性值是以bb开头的元素 */
        [name ^= 'bb'] {
            border: 1px solid goldenrod;
        }
        /* 选择attr属性值是以cc结尾的元素 */
        [name $= 'cc'] {
            border: 1px solid rgb(23, 6, 182);
        }
        /* 选择attr属性值中包含dd字符串的元素 */
        [name *= 'dd'] {
            border: 1px solid rgb(139, 12, 212);
        }
    </style>
    <body>
        <div name='aa'>aa</div>
        <!-- 因为name=aabb的div都不符合上述的四条,所以这个没有上述四条的css样式 -->
        <div name='aabb'>aabb</div>
        <div name='aa-bb'>aa-bb</div>
        <div name='bbaa'>bbaa</div>
        <div name='dfdfdd'>dfdfdd</div>
    </body>
    

    结果图如图所示:
    在这里插入图片描述
    如果大家有补充的,可以在下面评论中补充哦,大家一起学习,撒花!!

    展开全文
  • jQuery选择器详细介绍:基本选择器,层次选择器,属性选择器


    jQuery选择器的格式: $("选择器")                                                                                                                                  


    一、基础选择器


    1、基本选择器                                                                                                                                                                 


    使用范围:在jQuery中,基本选择器是使用最频繁的选择器。

    • (1)元素选择器;
    • (2)id选择器;
    • (3)class选择器;
    • (4)群组选择器;
    • (5)*选择器

    • (1)元素选择器;
    • 语法:$("元素名")
    • <span style="font-family:Arial;"><span style="color:#1a1a1a;"><pre name="code" class="java"><!DOCTYPE html> 
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
          <title></title>
          <script src="jquery-1.12.0.min.js" type="text/javascript"></script>
          <script type="text/javascript">
              $(function () {
                </span><strong style="background-color: rgb(255, 255, 255);"><span style="color:#1a1a1a;"> </span><span style="color:#ff0000;"> </span>$("div").css("color","red");   $("span").css("color","yello"); </strong><span style="background-color: rgb(255, 255, 255);"><strong>  </strong> //方法是jQuery操作CSS样式的方法因此使用点运算符来调用:$("div").css()</span><span style="color:#1a1a1a;">
              })
          </script>
      </head>
      <body>
          <div>我爱简简单单的</div>
          <span>我爱简简单单的</span>
      </body>
      </html></span></span>
      
      在浏览器预览效果如下:
    • 注意:CSS选择器和jQuery选择器的转换关系:只需要把CSS选择器的写法套进$("")中,就变成了jQuery选择器
    • (2)id选择器;
      • 语法:$("#id名")
      • 说明:id名前面必须加上前缀“#”,否则该选择器无法生效
      <span style="font-family:Arial;font-size:10px;"><span style="color:#1a1a1a;"><!DOCTYPE html>
      <html>
      <head>
          <title>JSON Object Example</title>
          <meta charset="utf-8">
          <script src="jquery-1.12.0.min.js" type="text/javascript"></script>
            <script type="text/javascript">
              $(function () {
                              $("div").css("color","red");
      			$("span").css("color","yello");
      			</span><span style="color:#ff0000;">$("#a").css("color","blue");</span><span style="color:#1a1a1a;">
              })
      	</script>
      
      </head>
      <body>
          <div>我爱简简单单的</div>
       </span><span style="color:#ff0000;">   <div id="a">我爱简简单单的</div></span><span style="color:#1a1a1a;">
          <span>我爱简简单单的</span>
      </body></span></span>
      在浏览器预览效果如下:


    • (3)class选择器;
    • 语法:$(".类名")
    • 说明:id名前面必须加上前缀“.”,否则该选择器无法生效
    • <span style="font-family:Arial;font-size:10px;"><span style="color:#1a1a1a;"><!DOCTYPE html>
      <html>
      <head>
          <title>JSON Object Example</title>
          <meta charset="utf-8">
          <script src="jquery-1.12.0.min.js" type="text/javascript"></script>
            <script type="text/javascript">
              $(function () {
                  $("div").css("color","red");
      			$("span").css("color","yello");
      			$("#a").css("color","blue");
      			</span><span style="color:#ff0000;">$(".b").css("color","green");</span><span style="color:#1a1a1a;">
              })
      	</script></span></span><span style="color: rgb(26, 26, 26); font-family: SimHei; font-size: 15px;">
      </span><span style="font-size:12px;"><span style="color: rgb(26, 26, 26); font-family: SimHei;"></head>
      <body>
          <div>我爱简简单单的</div>
          <div id="a">我爱简简单单的</div>
          <span>我爱简简单单的</span>
          </span><span style="font-family: SimHei;"><span style="color:#ff0000;"><div class="b">我爱简简单单的</div></span></span><span style="color: rgb(26, 26, 26); font-family: SimHei;">
      </body>
      </html></span></span>
      在浏览器预览效果如下:



    • (4)群组选择器;
    • 语法:$("选择器1,选择器2,...,选择器n")
    • 说明:选择器之间必须用英文逗号“,”隔开,否则该选择器无法生效
    <span style="font-family:Arial;font-size:12px;"><span style="color:#1a1a1a;"><!DOCTYPE html>
    <html>
    <head>
        <title>JSON Object Example</title>
        <meta charset="utf-8">
        <script src="jquery-1.12.0.min.js" type="text/javascript"></script>
          <script type="text/javascript">
            $(function () {
                </span><span style="color:#ff0000;">$("div,span,#a,.b").css("color","green");</span><span style="color:#1a1a1a;">
            })
    	</script>
    
    </head>
    <body>
        <div>我爱简简单单的</div>
        <div id="a">我爱简简单单的</div>
        <span>我爱简简单单的</span>
        <div class="b">我爱简简单单的</div>
    </body>
    </html></span></span>
    在浏览器预览效果如下:


    • (5)*选择器
    • 语法:*{padding:0;margin:0;}
    • 说明:*选择器,也称为全选选择器,用于选择所有的元素。在CSS中,常用*选择器去除默认的padding和margin的值
    <span style="font-family:Arial;"><!DOCTYPE html>
    <html>
    <head>
        <title>JSON Object Example</title>
        <meta charset="utf-8">
        <script src="jquery-1.12.0.min.js" type="text/javascript"></script>
          <script type="text/javascript">
            $(function () {
               <span style="color:#ff0000;"> $("#c *").css("color","green");</span>
            })
    	</script>
    
    </head>
    <body>
    <span style="color:#ff0000;"><div id="c"></span>
        <div>我爱简简单单的</div>
        <div id="a">我爱简简单单的</div>
        <span>我爱简简单单的</span>
        <div class="b">我爱简简单单的</div>
    <span style="color:#ff0000;"></div></span>
    </body>
    </html></span>

    在浏览器预览效果如下:


    CSS规定了如下优先级:

    行内样式->id样式->class样式->标记样式

    2、层次选择器                                                                                                                                                                 

    • (1)后代选择器
    • 语法:$("M N")
    • 说明:选择M元素内部后代N元素,包括所有后代元素。

    • (2)子代选择器
      • 语法:$("M>N")
      • 说明:选择M元素内部某一个子元素,只限子元素。

    • (3)兄弟选择器
      • 语法:$("M~N")
      • 说明:选择M元素后面(不包括前面)的(所有的)某一类兄弟元素N。

    • (4)相邻选择器
      • 语法:$("M+N")
      • 说明:选择M元素后面(不包括前面)的(相邻的)某一类兄弟元素N
      <span style="font-family:Arial;font-size:12px;"><span style="color:#1a1a1a;"><!DOCTYPE html>
      <html>
      <head>
          <title>JSON Object Example</title>
          <meta charset="utf-8">
          <style type="text/css">
      		*{padding:0;margin:0}/*去除所有元素默认的padding和margin*/
              ul{list-style-type:none;}/*去除列表项默认符号*/
      		li{height:30px;}/*去除列表项默认符号*/
      	</style>
          <script src="jquery-1.12.0.min.js" type="text/javascript"></script>
            <script type="text/javascript">
              $(function () {
                  </span><span style="color:#ff0000;">$("li*li").css("border-top","3px solid green");</span><span style="color:#1a1a1a;">
              })
      	</script>
      
      </head>
      <body>
      	<ul>
          	<li>我爱简简单单的</li>
              <li>我爱简简单单的</li>
              <li>我爱简简单单的</li>
              <li>我爱简简单单的</li>
              <li>我爱简简单单的</li>
              <li>我爱简简单单的</li>
              <li>我爱简简单单的</li>
          </ul>
      </body>
      </html></span></span>
      在浏览器预览效果如下:

    分析:

         $("li+li")使用的是相邻选择器,表示“选择li元素相邻的下一个li元素”。由于最后一个li元素没有相邻的下一个li元素,所以对于最后一个li元素,它是没有下一个li元素可以选取的。$("li+li").css("border-top", "2px solid red")达到在两两li元素之间添加一个边框的效果。这是一个非常棒的技巧,在实际开发中如果我们想要在两两元素之间实现什么效果,我们经常会用到这个技巧!大家请一定不要浪费这个强大的技巧!


    3、属性选择器                                                                                                                                                                 


    使用范围:在jQuery中,属性选择器最常见于表单操作。


    选择器 说明
    $("selector[attr]") 选择包含给定属性的元素
    $("selector[attr='value']") 选择给定的属性是某个特定值的元素
    $("selector[attr != 'value']") 选择所有含有指定的属性,但属性不等于特定值的元素
    $("selector[attr *= 'value']") 选择给定的属性是以包含某些值的元素
    $("selector[attr ^= 'value']") 选择给定的属性是以某些值开始的元素(比较少用)
    $("selector[attr $= 'value']") 选择给定的属性是以某些值结尾的元素(比较少用)
    $("selector[selector1][selector2]…[selectorN]") 复合属性选择器,需要同时满足多个条件时使用











    注:selector指的是选择器,attr指的是属性(attribute),value指的是属性值。


    <span style="font-family:Arial;font-size:12px;"><!DOCTYPE html>
    <html>
    <head>
        <title>JSON Object Example</title>
        <meta charset="utf-8">
        <style type="text/css">
    		*{padding:0;margin:0}/*去除所有元素默认的padding和margin*/
            ul{list-style-type:none;}/*去除列表项默认符号*/
    		li{height:30px;}/*去除列表项默认符号*/
    	</style>
        <script src="jquery-1.12.0.min.js" type="text/javascript"></script>
          <script type="text/javascript">
            $(function () {
               <span style="color:#ff0000;"> $("input[type='checkbox']").attr("checked","checked");</span>//<span style="color: rgb(26, 26, 26); font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif; font-size: 15px; line-height: 27px; text-indent: 30px;">表示把所有复选框的checked属性值设置为checked(即被选中)。</span>
            })
    	</script>
    
    </head>
    <body>
    <br>
    	<h3>请选择以下需要购买的蔬菜</h3><br>
        <div id="list">
        	<input type="checkbox" />黄瓜
            <input type="checkbox" />西红柿
            <input type="checkbox" />土豆
            <input type="checkbox" />茄子
        </div>
    </body>
    </html></span>


    在浏览器预览效果如下:

    拓展:

    $("#a")等价于$("[id='a']")

    $(".a")等价于$("[class='a']")


    展开全文
  • CSS 属性选择器

    千次阅读 2018-01-11 20:02:34
    属性选择器 在HTML中,可以通过元素各种各样的属性,来给元素增加很多附加信息。如通过 width 属性,可以指定元素的宽度;通过 id 属性,可以区分不同的元素,并通过Javascript来控制这些元素的内容和状态。 以往...

    在HTML中,可以通过元素各种各样的属性,来给元素增加很多附加信息。如通过 width 属性,可以指定元素的宽度;通过 id 属性,可以区分不同的元素,并通过Javascript来控制这些元素的内容和状态。

    以往的CSS中,大量使用类选择器来定义样式。由于类选择器并不能说明什么样式服务于什么元素。因此,对于一个大型网站,CSS代码比较庞大,若要修改某个样式,就成为非常头疼的事情。

    CSS的属性选择器使上述问题迎刃而解,因为它是语义化的选择器,可以根据元素是否拥有某个属性或属性的值来选择元素。

    表 2‑3 属性选择器
    选择器功能描述版本
    E[attribute]选择拥有属性 attribute 的E元素,不考虑属性的值2
    E[attribute = val]选择属性 attribute 的值等于val的E元素2
    E[attribute ~= val]选择属性 attribute 的值是用空格分隔的多个单词,其中一个单词的值等于 val的E元素2
    E[attribute |= val]选择属性 attribute 的值是用连字符"-"分隔的单词,并以 val 开头的E元素,主要用于 lang 属性,比如 "en"、"en-us"、"en-gb" 等2
    E[attribute *= val]选择属性 attribute 的值包含 val 子字符串的E元素3
    E[attribute ^= val]选择属性 attribute 的值以 val 开头的E元素,val 为完整的单词或单词的一部分3
    E[attribute $= val]选择属性 attribute 的值以 val 结尾的E元素,val 为完整的单词或单词的一部分3

    (1)E[attribute] 选择器

    该选择器表示,选择拥有attribute属性的E元素,不管属性的值是什么。如果省略E,则表示选择任何类型的元素,只要它拥有attribute属性(下同)。

    如,为所有包含 rel 属性的超链接应用样式,让其文本为绿色:

    1. a[rel] {
    2. color: green;
    3. }

    还可以根据多个属性进行选择,只需将多个属性链接在一起即可。如,将同时带有href和 title 属性的所有超链接设置为红色:

    1. a[href][title] {
    2. color: red;
    3. }

    (2)E[attribute = val] 选择器

    该选择器表示,选择设置了属性 attribute,且属性的值为val的E元素。如,将指向首页的的所有超链接设置为红色:

    1. a[href = "http://www.waibo.wang/"] {
    2. color: red;
    3. }

    在处理表单时,许多元素都使用相同的标签,如复选框、文本输入框、提交按钮等,都使用 input 标签,而实际上它们的功能却完全不同,其功能由 type 属性的值来决定。如果仅仅想为文本输入框添加边框,就可以使用这个选择器。如:

    1. input[type = "text"] {
    2. border: 1px solid #ccc;
    3. }

    该选择器也支持根据多个属性进行选择,只需将多个属性-值链接在一起即可。如,将 href 属性值为 http://www.waibo.wang/,且 title 属性值为“歪脖网首页”的所有超链接加粗显示:

    1. a[href = "http://www.waibo.wang/"][title = "歪脖网首页"] {
    2. font-weight: bold;
    3. }

    需要注意的是,该选择器的指定的属性值,必须与HTML标签中的属性值完全匹配才行,否则就会选择失败。如,在HTML中的class属性中,如果包含多个类名,类名之间用一个空格分隔:

    1. <p class="urgent warning"> urgent warning</p>

    如果要根据 class 属性的值来选择这个元素,必须写成:

    1. p[class = "urgent warning"] {
    2. font-weight: bold;
    3. }

    要求选择器的属性值必须与HTML标签中的属性值完全相同,urgent在前,warning在后,就连空格的个数也要完全相同,否则就会匹配失败。

    (3)E[attribute ~= val] 选择器

    该属性选择器表示,选择拥有属性 attribute,且属性的值是用空格分隔的列表,其中一个列表值为 val的E元素。

    在HTML中,这方面最经典的例子就是 class 属性,它能接受一个或多个词作为其属性值。还是前面的示例:

    1. <p class="urgent warning"> urgent warning</p>

    如果要选择 class 属性值中包含 warning 的元素,写成下面这个样子就可以了:

    1. p[class ~= "warning"] {
    2. font-weight: bold;
    3. }

    其实,该选择器只要求属性中包含指定的值即可,属性的值是否是词的列表也无关紧要,因此,上述选择器也会匹配 class = "warning" 的段落。也就是说,p[class ~= "warning"] 和 p.warning 的作用是等价的。

    (4)E[attribute |= val] 选择器

    该属性选择器表示,选择拥有属性 attribute,且属性的值是用连字符"-"分隔的单词,并以 val 开头的E元素,主要用于 lang 属性,比如 "en"、"en-us"、"en-gb" 等等。

    如,通过使用通用选择器,这个选择器选择任何带有 lang 属性且属性值以 en 开头的元素:

    1. *[lang |= "en"] {
    2. color: green;
    3. }

    上述规则就会选择 lang属性值等于 en,或以 en- 开头的所有元素。因此,以下示例中的前两个会被选中,而后两个不会被选中:

    1. <h1 lang = "en">Hello!</h1>
    2. <p lang = "en-us">Greetings!</p>
    3. <h2 lang = "fr">Bonjour!</h2>
    4. <div lang = "cy-en">Jrooana!</div>

    当然,该选择器可以用于任何属性和值。假如一个文档中有一系列图像,每个图像的文件名都形如 figuer-1.gif 和figuer-2.jpg,就可以使用以下选择器匹配所有这些图像:

    1. img[src |= "figuer"] {
    2. border: 1px solid gray;
    3. }

    (5)E[attribute *= val] 选择器

    该属性选择器表示,选择拥有属性 attribute,且属性的值包含 val 子字符串的E元素。

    假如网站在链接类名中添加 nav 子串,来区分导航链接,主导航的类名为 mainnav,页码导航的类名为 pagenav:

    1. <div class = "mainnav">
    2. <a href = "#"></a>
    3. </div>
    4. <div class = "pagenav">
    5. <a href = "#" ></a>
    6. </div>

    如果想去掉所有导航链接的下划线,就可以使用该选择器:

    1. div[class *= "nav"] a {
    2. text-decoration: none;
    3. }

    (6)E[attribute ^= val] 选择器

    该属性选择器表示,选择拥有属性 attribute,且属性的值以 val 开头的E元素,val 为完整的单词或单词的一部分。

    如,为了突显指向网站外部的链接,就可以使用 E[ attribute ^= val ] 属性选择器,来寻找所有以 http: 开头的链接,在右侧添加外部链接的小图标。

    1. a[href ^= "http://"] {
    2. padding-right: 20px;
    3. background: url(img/external.gif) no-repeat right top;
    4. }

    (7)E[attribute $= val] 选择器

    该属性选择器表示,选择拥有属性 attribute,且属性的值以 val 结尾的E元素,val 为完整的单词或单词的一部分。

    对于一些下载站,用户可以下载各种不同类型的文件,而文件类型是根据超链接中 href 属性值的最后几个字符来确定:

    1. <a href = "a.doc">DOC文件</a>
    2. <a href = "a.xls">XLS文件</a>
    3. <a href = "a.ppt">PPT文件</a>
    4. <a href = "a.pdf">PDF文件</a>
    5. <a href = "a.rar">RAR文件</a>
    6. <a href = "a.wmv">WMV文件</a>

    这种情况,就可以使用该属性选择器,检测文件的扩展名,并为不同类型的文件添加不同的图标,以提高用户体验:

    1. a {
    2. display: block;
    3. padding: 4px 24px;
    4. font-size: 14px;
    5. color: #000;
    6. }
    7. a[href $= "doc"],
    8. a[href $= "docx"] {
    9. background: url('img/doc.gif') no-repeat left center;
    10. }
    11. a[href $= "xls"],
    12. a[href $= "xlsx"] {
    13. background: url('img/xls.gif') no-repeat left center;
    14. }
    15. a[href $= "ppt"] {
    16. background: url('img/ppt.gif') no-repeat left center;
    17. }
    18. a[href $= "pdf"] {
    19. background: url('img/pdf.gif') no-repeat left center;
    20. }
    21. a[href $= "zip"],
    22. a[href $= "rar"] {
    23. background: url('img/rar.gif') no-repeat left center;
    24. }
    25. a[href $= "wmv"] {
    26. background: url('img/wmv.gif') no-repeat left center;
    27. }

    运行结果如图 2‑7 所示:

    CSS属性选择器图2-7 CSS属性选择器

    关于作者

    歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

    展开全文
  • jquery属性选择器

    2018-05-17 21:49:45
    1、[attribute]属性选择器 代表着只要元素标签含有某一个指定的属性,该元素就会被匹配的到。不管元素的属性是什么值。比如$("input[id]"):匹配含有属性id的input元素。2、[attribute=value]属性选择器 ...
  • 使用CSS3属性选择器,你可以只指定元素的某个属性,或者你还可以同时指定元素的某个属性和其对应的属性值。从上一节展示的CSS3选择器的图表中,我们可以知道,CSS3的属性选择器主要包括以下几种: E[attr]:只使用...
  • JS属性选择器

    千次阅读 2020-03-06 20:52:01
    属性选择器 [属性名] 表示选取含有指定属性的元素 p[name]{ font-size="28px"; } [属性名=“属性值”] 表示选取属性等于指定属性值的元素 p[name="jack"]{ font-size="20px"; } [属性名~=“属性值”] 表示...
  • 上一切在《CSS3选择器——基本选择器》中主要介绍了CSS3选择器的第一部分,这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器属性选择器早在CSS2中就被引入了,其主要作用就是对带有指定属性的HTML ...
  • css属性选择器和通配符选择器

    万次阅读 2017-02-10 15:38:46
    一,属性选择器1<!DOCTYPE html> <title>20-css属性选择器上.html</title> <!-- 属性选择器,根据指定的属性名称找到对应的标签,设置属性 1,格式: [attribute] 作
  • CSS属性选择器

    千次阅读 2019-05-19 23:37:38
    属性选择器 选取标签带有某些特殊属性的选择器 **选择器 **示例 **含义 E[attr]**** 存在attr属性即可 E[attr=val]**** 属性值完全等于val E[attr*=val]**** 属性值里包含val字符并且在“任意”位置 ...
  • JQ属性选择器

    2019-05-18 17:49:15
    JQ属性选择器 通过属性选择器去找到 a href $("a[href]").css("color","red"); //只有一个属性 找出包含href ,title $("a[href][title]").css("color","red"); //多个属性 找出包含href title ...
  • 在此之前,大家应该学了一些基本的css选择器,比如简单的id选择器,class选择器,标签选择器,群组选择器,包含选择器等, 本篇文章主要是分享几个CSS3的属性选择器属性选择器应用起来还是非常方便的。...
  • 属性选择器,通过属性,来选择对应的标签,并设置相应的css样式。 /* 属性选择器:属性是相对于标签而言。所谓的属性选择器,就是根据指定名称的值来查找元素 a) E[attr],表示存在attr属性的E标签; div[class] b...
  • 复合选择器是通过基本选择器进行组合后构成的,常用的复合选择器有:交集选择器、并集选择器、后代选择器、子元素选择器、相邻兄弟选择器和属性选择器等。 1. 交集选择器 交集选择器由两个选择器直接构成,其中...
  • 使用CSS3属性选择器,你可以只指定元素的某个属性,或者你还可以同时指定元素的某个属性和其对应的属性值。  从上一节展示的CSS3选择器的图表中,我们可以知道,CSS3的属性选择器主要包括以下几种:  E[attr...
  • js实现类选择器和name属性选择器

    千次阅读 2019-06-17 12:40:00
    jQuery的出现,大大的提升了我们操作dom的效率,使得我们的开发更上一层楼,如jQuery的选择器就是一个很强大的功能,它包含了类选择器、id选择器、属性选择器、元素选择器、层级选择器、内容筛选选择器等等,很是...
  • css属性选择器

    千次阅读 2018-12-22 14:01:35
    css属性选择器 对带有指定属性的 HTML 元素设置样式。 可以为拥有指定属性的 HTML 元素设置样式,而不仅限于 class 和 id 属性。 实例: **1.**下面是包含指定值的target属性的元素样式的例子 a[target]{ background...
  • CSS的属性选择器

    千次阅读 2021-01-22 22:50:19
    属性选择器(常用) ​ *= 包含等于 ​ ^= 以这个开头的 ​ $= 以这个结尾 格式: 例如: a[href$=gif]{ background: black; } ```css <!DOCTYPE html> <html lang="en"> <head> &...
  • jQuery 层次选择器,属性选择器

    千次阅读 2016-12-01 10:40:25
    jQuery层次选择器 jquery属性选择器 jq根据是否有某属性选择 jq选取子元素、后边的元素等 $("div >span") $("#one +div") $("#one~div")
  • CSS3选择器(基础选择器、属性选择器、伪类选择器、选择器策略)
  • css选择器-属性选择器

    2015-06-21 23:19:39
    CSS3的属性选择器主要包括以下几种:  E[attr]:只使用属性名,但没有确定任何属性值;  E[attr="value"]:指定属性名,并指定了该属性的属性值;  E[attr~="value"]:指定属性名,并且具有属性值,此属性值是...
  • 在jquery中,属性选择器是被包裹在[]中,以下是所支持的属性选择器。   1 有属性[a] 选择有a 属性的所有元素。   例如: $(‘a[rel]’)—选择含有属性rel的的所有a标签。   2 属性值等于 [A=”B”] 选择...
  • CSS3——属性选择器

    千次阅读 2018-05-12 19:53:44
    CSS3 属性选择器 CSS3 属性选择器,在 CSS3 中,追加了三个属性选择器分别为:[att*=val]、[att^=val]和[att$=val],使得属性选择器有了通配符的概念。[att*=val]表示包含。CSS3 结构性伪类选择器,包含伪类选择器...
  • 属性选择器 优先级

    2017-06-28 19:01:13
    1.属性选择器 ^ 表示属性以某一个字符开头,匹配以某一个字符开头的属性 span[test^="a"]{ color: rgb(200, 100, 100); } $ 匹配属性以某字符结尾的标签 span[test$="c"]{ color: green; } * 通配

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 37,789
精华内容 15,115
关键字:

属性选择器