精华内容
下载资源
问答
  • 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']")


    展开全文
  • 可见性过滤选择器 可见性过滤选择器是指根据元素的可见性来筛选元素的选择器选择器 描述 返回 :hidden 选取所有的不可见元素,或者ytpe为hidden的元素 jQuery对象数组 :visible 选取所有的可见元素 ...

    可见性过滤选择器

    可见性过滤选择器是指根据元素的可见性来筛选元素的选择器。

    选择器描述返回
    :hidden选取所有的不可见元素,或者ytpe为hidden的元素jQuery对象数组
    :visible选取所有的可见元素jQuery对象数组

    其中,:hidden选择器用于选取所有不可见元素,包括< input type=“hidden” />、< div style=“display:none”; >等形式的不可见元素。

    示例:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
    	</head>
    	<body>
    		<div id="topDiv">页面顶部</div>
    		<div id="menuDiv" style="display: none;">菜单栏</div>
    		<div id="mainDiv" style="height: 60px;">
    			用户ID:<input type="hidden" value="用户ID" /><br />
    			用户名:<input type="text" name="userName" value="请输入用户名"/>
    		</div>
    		<button id="showHidden" onclick="showHiddenElement()">显示</button>
    		<script type="text/javascript">
    			$(function(){
    				//页面可见div
    				$("div:visible").css("background-color","blue");
    				//页面可见input
    				$("input:visible").css("border","2px solid red");
    				//所有可见元素
    				$(":visible").css("font-size", "20px");
    			});
    			function showHiddenElement(){
    				//隐藏的div
    				$("div:hidden").show(1000);
    				//隐藏的input
    				$("ipunt:hidden").attr("type","text");
    			}
    		</script>
    	</body>
    </html>
    

    在这里插入图片描述
    在这里插入图片描述

    注意:在jQuery中,因为visibility:hidden和opacity:0 修饰的元素在页面中占据一定物理空间,所以都被视为可见的。

    属性过滤选择器

    属性过滤选择器是指根据元素的属性来筛选元素的选择器,在属性匹配时以“[” 开始、以“]”结束。

    选择器描述返回
    [attribute]选取包含指定属性的元素jQuery对象数组
    [attribute=value]选取属性等于某个特定值的元素jQuery对象数组
    [attribute!=value]选取属性不等于或不包含某个特定值的元素jQuery对象数组
    [attribute^=value]选取属性以某个值开始的元素jQuery对象数组
    [attribute$=value]选取属性以某个值结尾的元素jQuery对象数组
    [attribute*=value]选取属性中包含某个值的元素jQuery对象数组
    [attribute1][attribute2][attribute3]复合属性选择器,需要同时满足多个条件时使用jQuery对象数组

    示例:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>jQuery属性过滤选择器</title>
    		<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
    	</head>
    	<body>
    		<div id="topDiv" title="top" desc="页面顶部">页面顶部</div>
    		<div id="menuDiv" title="menu">菜单栏</div>
    		<div id="mainDiv">主题区</div>
    		<div id="leftDiv" title="mainLeft">左侧栏</div>
    		<div id="rightDiv" title="mainRight">右侧栏</div>
    		<div id="bottomDiv" title="bottom" desc="页面底部">底部栏</div>
    		<div id="advDiv" title="advbottom">广告栏</div>
    		
    		<script type="text/javascript">
    			$(function(){
    				//具有titile属性的div
    				$("div[title]").css({width:"300px",height:"30px",margin:"3px"});
    				//title属性值为menu的div
    				$("div[title=menu]").css("border","2px solid red");
    				//title属性值不为menu的div
    				$("div[title!=menu]").css({backgroundColor:"blue"});
    				//title属性值以main开头的div
    				$("div[title^=main]").css("margin-left","100px");
    				//title属性值以bottom结尾的div
    				$("div[title$=bottom]").css("padding-left","50px");
    				//title属性值包含o的div
    				$("div[title*=o]").css("font-style","initial");
    				//title属性值包含o且含有desc属性的div
    				$("div[title*=o][desc]").css("font-weight","800");
    			});
    		</script>
    	</body>
    </html>
    

    在这里插入图片描述

    展开全文
  • 复合选择器是通过基本选择器进行组合后构成的,常用的复合选择器有:交集选择器、并集选择器、后代选择器、子元素选择器、相邻兄弟选择器和属性选择器等。 1. 交集选择器 交集选择器由两个选择器直接构成,其中...

    复合选择器是通过基本选择器进行组合后构成的,常用的复合选择器有:交集选择器、并集选择器、后代选择器、子元素选择器、相邻兄弟选择器和属性选择器等。

    1. 交集选择器

    交集选择器由两个选择器直接构成,其中第一个必须是元素选择器,第二个必须是类选择器或者ID选择器。两个选择器之间必须连续写,不能有空格。交集选择器选择的元素必须是有第一个选择器指定的元素类型,该元素必须包含第二个选择器对应的ID或者类名。交集选择器选择的元素是三个选择器的样式,即第一个选择器、第二个选择器和交集选择器三个选择器样式的层叠效果。

    比如: p.one 选择的是: 类名为 .one 的 段落标签。

    元素选择器.类选择器|#ID选择器{
    	属性1:属性值1;
    	属性2:属性值2;
    	…
    }
    

    **PS:交集选择器由于会增加代码量,会影响性能且不利于后期维护,所以除了不得已使用外,一般不推荐使用。


    2.并集选择器
    并集选择器也叫分组选择器或群组选择器,它是有两个或两个以上的任意选择器组成的,不同选则器之间用","隔开,实现对多个选择器进行“集体声明”,特点是:所设置的样式对并集选择器中各个选择器都有效,它的作用是把不同选择器的相同样式抽取出来,然后放到一个地方一次性定义,从而简化了CSS代码量。

    选择器1,
    选择器2,
    选择器3,
    …{
    	属性1:属性值1;
    	属性2:属性值2;
    	…
    }
    

    语法说明:选择器的类型任意,既可以是基本选择器,也可以是一个复合选择器。
    3.后代选择器
    后代选择器又称包含选择器,用于选择指定元素的后代元素

    选择器1 选择器2 选择器3 …{
    	属性1:属性值1;
    	属性2:属性值2;
    	…
    }
    

    语法说明位于左边的选择器可以包含两个或多个使用空格隔开的选择器,位于后面的选择器选择的元素术语前面选择器的孩子,这些选择器既可以是基本选择器,也可以是复合选择器,需要注意的是,后代选择器所选择的后代元素包括任意嵌套层次的后代,而且一般后代选择器中包含的选择器最多三层。

    4.子元素选择器
    后代选择器可以选择某个元素指定类型的所有后代元素,如果只想选择某个元素的所有子元素,则需要使用子元素选择器。

    选择器1>选择器2{
    	属性1:属性值1;
    	属性2:属性值2;
    	…
    }
    

    语法说明:">"称为左结合符,在其左右两边可以出现空格,“选择器1>选择器2”的含义为选择作为选择器1指定元素的所有选择器2指定的子元素,例如:div>span表示选择了div元素内的所有子元素span。子元素选择器中的两个选择器既可以是基本选择器,也可以是交集选择器,另外选择器1还可以是后代选择器。
    我一开始觉得后代选择器和子元素选择器,它们两个似乎很像,但是它们还是有一定的区别:例如下面这两行语句:

    <h1>这是非常<span>重要</span>且<span>关键</span>的一步。</h1>
      <h1>这是真的非常<em><span>重要</span></em>且<em><span>关键</span></em>的一步。</h1>
    

    如果我们想操作span元素,如果使用后代选择器,即h1 span,会对这两行的span元素都进行操作,因为这两行中的span都是h1的后代,但是如果我们想只对第一行的span元素进行操作,可以用子元素选择器,即h1>span,因为第二行的span元素是em元素的子元素,并不直接是h1的子元素。
    5.相邻兄弟选择器
    如果需要选择紧接在某个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器。

    选择器1+选择器2{
    	属性1:属性值1;
    	属性2:属性值2;
    	…
    }
    

    "+"称为相邻兄弟结合符,在其左右两边可以出现空格,"选择器1+选择器2"的含义为选择紧接在选择器1指定元素后出现选择器2指定的元素,且这两个元素拥有共同的父元素,例如:div+span 表示选择紧接在div元素后出现的span元素,其中div和span两个元素拥有共同的父元素。
    6.属性选择器
    在CSS中,我们还可以根据元素的属性及属性值来选择元素,此时用到的选择器称为属性选择器,属性选择器的使用主要有两种形式,其基本语法如下:

    属性选择器1属性选择器2…{
    	属性1:属性值1;
    	属性2:属性值2;
    	…
    }
    元素选择器属性选择器1属性选择器2…{
    	属性1:属性值1;
    	属性2:属性值2;
    	…
    }
    

    语法说明:属性选择器的写法是[属性表达式],其中属性表达式可以是一个属性名,也可以是“属性=属性值”等这样的表达式,例如:[title]和[type="text"]都是属性选择器,属性选择器前可以指定某个元素选择器,此时将在指定类型的元素中进行选择,例如:img[title]只能选择具有title属性的img元素。属性选择器前也可以使用通配符"*",此时效果和第一种形式完全一样,都不限定选择元素的类型,例如:*[title]和[title]效果完全一样,都将选择具有title属性的所有元素,注意"*"和属性选择器之间没有空格,另外可以连续使用多个不同的属性选择器,此时将进一步缩小元素选择的范围,例如:a[href][title]用于选择同时具有href和title属性的a元素

    类型选择器描述
    根据属性选择[属性]用于选取带有指定属性的元素
    根据属性和值选择[属性=值]用于选取带有指定属性和值的元素
    根据部分属性值选择[属性~=值]用于选取属性值中包含指定值的元素,注意该值必须是一个完整的单词
    子串匹配属性值[属性 |=值]用于选取属性值以指定值开头的元素,注意该值必须是一个完整的单词或带有"_"作为连接符连接
    后续内容的字符串,如“en-”
    子串匹配属性值[属性^=值]用于选取属性值以指定值开头的元素
    子串匹配属性值[属性$=值]用于选取属性值以指定值结尾的元素
    子串匹配属性值[属性$=值]用于选取属性值以指定值结尾的元素
    子串匹配属性值[属性*=值]用于选取属性值中包含指定值的元素
    展开全文
  • 而class属性本身没有语义,它纯粹是用来为CSS服务的,属于多余属性,并没把样式和元素绑定起来,一个CSS类选择器,文本框可以使用,下拉框也可以使用,甚至按钮也可以使用,这样其实非常混乱, 修改时就不方便,所以...

            对HTML页面中的元素使用CSS实现一对一,一对多或者多对一的控制,要用到CSS选择器。在大篇CSS代码中,并没有说明什么样式服务于什么元素,只是在元素中使用了class属性。而class属性本身没有语义,它纯粹是用来为CSS服务的,属于多余属性,并没把样式和元素绑定起来,一个CSS类选择器,文本框可以使用,下拉框也可以使用,甚至按钮也可以使用,这样其实非常混乱, 修改时就不方便,所以CSS3中提倡使用选择器来将样式与元素直接绑定起来,这样的话,在样式中什么样式与什么元素相匹配就会变得一目了然,修改起来也很方便。不仅如此,通过css3选择器我们还可以实现各种复杂的指定, 同时也能大量减少样式表的代码书写量,最终书写出来的样式表也会变得简洁明了。


    基本选择器

    说明

    *

    通用元素选择器,匹配任何元素

    E

    标签选择器,匹配所有使用E标签(所有HTML元素)的元素

    .info

    class选择器,匹配所有class属性中包含info的元素

    #footer

    id选择器,匹配所有id属性等于footer的元素

    selector1,selector2


    群组选择器,将每一个选择器匹配的元素集合并



    层次选择器

    层次选择器
    类型功能描述

    E    F
    后代选择器选择匹配的F元素,且F元素被包含在匹配的E元素内

    E > F
    子选择器选择匹配的F元素,且F元素是E元素的子元素

    E + F
    相邻兄弟选择器选择匹配的F元素,且F元素是E元素后面紧邻的兄弟元素

    E ~ F
    通用选择器选择匹配的F元素,且F元素是E元素后面的所有兄弟元素

    属性选择器


    属性选择器

    功能描述

    E[attr]
    选中具有attr属性的E元素

    E[attr=val]
    选中具有attr属性,并且属性值为val的E元素

    E[attr|=val]
    选中具有attr属性,并且属性值为val或以val-开头

    E[attr~=val]
    选中具有attr属性,并且属性值包含val的E元素,该属性值必须以空格隔开

    E[attr*=val]通配符
    选中具有attr属性,并且属性值包含val的E元素

    E[attr^=val]起始符
    选中具有attr属性,并且属性值以val开始的E元素

    E[attr$=val]结束符
    选中具有attr属性,并且属性值以val结束的E元素


    具体实例分析:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <style>
    
    *{margin: 0;padding: 0;}
    p{height:30px;border:1px solid #000;margin-bottom: 2px;}
    
    </style>
    </head>
    <body>
        <p cat="leold">leo</p>
        <p cat="dp">杜鹏</p>
        <p cat="zM">子鼠</p>
        <p cat="xm">小美</p>    
        <p cat="leo old">leo</p>
        <p cat="old dp">杜鹏</p>
        <p cat="zM">子鼠</p>
        <p cat="xm">小美</p>
    </body>
    </html>
    上面的代码结构运行后 的 效果显示如下:



    选中具有 cat  属性的 P元素,并将其背景色设置为红色, 就需要用到 CSS3的属性选择器, 代码如下:


    选中选中具有 cat 属性,并且属性值包含 old 的P元素,属性值包含有 old这个单独的单词   并且old必须是连写的不能拆开   代码及效果图如下:



    选中具有 cat 属性,并且属性值包含 old 的P元素, 代码及效果图如下:






           

     

        

    
    展开全文
  • 1.CSS分组选择器 在样式表中有很多具有相同样式的元素。为了尽量减少代码,你可以使用分组选择器,每个选择器用逗号分隔。 小实例: <!DOCTYPE html> <html lang="en"> <head> <meta ...
  • CSS3选择器介绍及用法总结

    千次阅读 多人点赞 2016-11-16 18:10:56
    CSS3新增了很多强大的选择器 它可以让我们少写一些js事件脚本 ...:xxx都属于伪类选择器,::xxx都属于伪元素选择器 有名字的选择器我尽量细分了CCS1选择器 选择器 类型 示例 说明 .class 类选择器 .demo
  • CSS选择器有哪些? 选择符类型 例子 例子描述 通用选择器 *  类别选择器(.class) .intro 选择class=”intro”的所有元素 ID选择器(#id) #first 选择id=”first”的所有元素 标签选择器(element) div 选择...
  • jquery 选择器(name,属性,元素)大全

    万次阅读 2016-11-11 16:19:35
    基本选择器 1. id选择器(指定id元素) 将id="one"的元素背景色设置为黑色。(id选择器返单个元素) $(document).ready(function () {  $('#one').css('background', '#000');  });2. class选择器(遍历...
  • CSS基础选择器 标签选择器(元素选择器) 标签选择器是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。其基本语法格式如下: 标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性...
  • CSS常用选择器 CSS选择器的作用是从HTML页面中找出特定的某类元素,而常用的CSS选择器有如下几类,一起来看看吧! 一、通配符选择器 通配符选择器常用 ‘*’ 号表示,它是所有选择器里作用范围最广的,能匹配页面中...
  • CSS 选择器有很多,大致可分为:基础选择器、组合选择器、伪类选择器和 CSS3 选择器 基础选择器 标签选择器(就是标签的名字) 所有的标签,都可以是选择器。比如 div、span、ul、li、dt、dl、dd、input 等 无论这...
  • CSS选择器及优先级 总结

    万次阅读 多人点赞 2018-03-14 22:02:18
    id选择器选择器 元素选择器 通配符选择器 浏览器自定义或继承 总结排序:!important &amp;amp;gt; 行内样式 &amp;amp;gt; ID选择器 &amp;amp;gt; 类选择器 &amp;amp;gt; 元素 &amp;amp;gt;...
  • JQuery属性过滤选择器

    千次阅读 2018-08-26 15:51:06
    属性过滤选择器 NO. 选择器 描述 1 [属性名称] 带有括号里的属性名称的元素集合 2 [属性名称=属性值] 属性名称=属性值的元素集合 3 [属性名称!=属性值] 属性名称不等于属性值的元素...
  • CSS 属性选择器 模糊匹配的使用

    万次阅读 2011-09-23 09:22:18
    转自:http://www.w3school.com.cn/css/css_selector_attribute.asp,属性选择器    根据部分属性值选择 如果需要根据属性值中的词列表的某个词进行选择,则需要使用波浪号(~)。 假设您想选择 class 属性中...
  • 子代选择器和后代选择器

    万次阅读 2018-08-02 09:12:48
    /*子代选择器 子 指的是 亲儿子 大于号分割 此时的a 一定是 li 的亲 儿子 */ color : red ; } 后代标签 ul a { /*后代选择器 所有的后代的意思 最多*/ color : red ; } 后代标签...
  • CSS选择器详解

    万次阅读 2020-08-29 19:06:55
    CSS所有选择器列表 CSS选择器用于选择你想要的元素的样式的模式。下面是css所有的选择器 选择器 示例 示例说明 css版本 .class .intro 选择所有class="intro"的元素 1 #id #firstname 选择所有id=...
  • 选择器详解

    千次阅读 2019-12-20 23:54:06
    选择器前面使用符号. (1)基本使用 为了将类选择器的样式与元素关联,必须将 class 指定为一个适当的值。例如: <h1 class="important">This heading is very important.</h1> <p class="important...
  • CSS3新增选择器

    千次阅读 2019-04-21 17:53:55
    都知道css有三个简单常用的选择器,#id、class和标签选择...css3属性选择器 css3结构伪类选择器 css3 UI伪类选择器 1.css3属性选择器 属性选择器语法如下(E表示标签): 选择器 功能描述 E[attribute] 选...
  • 一、元素选择符(Element Selectors) 其中,常用的选择符有 ID选择符(#...描述:选定所有对象。 <style> /* 选定页面所有元素(含body/html) */ *{ color:cadetblue; } </style> <h1>title</...
  • 04-CSS选择器:伪类(超链接操作)

    千次阅读 2019-03-12 15:08:25
    伪类(伪类选择器) 伪类:同一个标签,根据其不同的种状态,有不同的样式。这就叫做“伪类”。伪类用冒号来表示。 比如div是属于box类,这一点很明确,就是属于box类。但是a属于什么类?不明确。因为需要看用户点击...
  • css选择器在css的学习中无疑是十分重要的,所以,什么是css选择器?css选择器有哪些类型?这是我们必须要掌握的,本篇文章将给大家来介绍关于css选择器的基本定义,以及css选择器有哪些类型。 我们话不多说,直接...
  • 转自https://blog.csdn.net/major_zhang/article/details/78118823比较高级...注意: querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素,请使用 querySelectorAll() 方法替代。...
  • CSS的四种基本选择器和四种高级选择器

    万次阅读 多人点赞 2018-07-11 13:48:38
    CSS选择器:就是指定CSS要作用的标签,那个标签的名称就是选择器。意为:选择哪个容器。 CSS的选择器分为两大类:基本选择题和扩展选择器。 基本选择器: 标签选择器:针对一类标签 ID选择器:针对某一个特定的...
  • 学习Python写爬虫的时候,遇到css定位问题,故小结一下css选择器定位的方式通配符选择器:* {color:red;}CSS 类选择器匹配所有class = ‘important’*.important {color:red;}去掉前面通配符也是一样的。结合元素...
  • uniapp样式选择器最全详解

    千次阅读 2020-06-19 13:26:53
    选择器 css版本 h5 安卓 ios 微信小程序 备注 .class css1 Y Y Y Y - #id css1 Y Y Y Y - * css2 Y N N N - element css1 ...
  • 选择器使用了Element UI组件库中的select控件,但是该控件并没有提供修改背景颜色的接口或方法,所以只能自己通过强行修改组件源码中的类样式来实现,如下所示: .mapviewSelect input { background-color: #071...
  • CSS 的 类class选择器 的正确写法

    万次阅读 2017-12-01 10:16:59
    1.正确写法: 前面是标签名的通配符,后面是 class的名称。()*.a_class {color:red;}下面的简写,尽量少用.a_...举例2:*.a_class {}解释为:“其 class 属性值为 a_class 的所有任意标签”。3.多层类叠加:同一
  • Weka数据挖掘——选择属性

    万次阅读 2016-01-23 21:19:08
    选择属性属性选择是通过搜索数据中所有可能的属性组合,以找到预测效果最好的属性子集。手工选择属性既繁琐又容易出错,为了帮助用户事项选择属性自动化。Weka中提供了选择属性面板。要自动选择属性需要设立两个对象...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 417,192
精华内容 166,876
关键字:

属于属性选择器描述的是