精华内容
下载资源
问答
  • HTML层次选择器

    2020-10-10 21:55:04
    层次选择器 后代选择器:在某个元素的后面 /*后代选择器*/ <style> body p{ background:red; } </style> 123456 子选择器,一代 /*子选择器*/ <style> body>p{ background:orange; } &...

    层次选择器

    1. 后代选择器:在某个元素的后面
    /*后代选择器*/
    <style>
    body p{
    	background:red;
    }
    </style>
    123456
    
    1. 子选择器,一代
    /*子选择器*/
    <style>
    body>p{
    	background:orange;
    }
    </style>
    123456
    
    1. 相邻的兄弟选择器 同辈
    /*相邻兄弟选择器:只有一个,相邻(向下)*/
    <style>
    .active+p{
    background: red
    }
    </style>
    
    <body>
    	<p class="active">p1<p>
    	<p>p2</p>
    </body>
    
    
    12345678910111213
    
    1. 通用选择器
    <style>
    /*通用兄弟选择器,当前选中元素的向下的所有兄弟元素*/
    	.active~p{
    	background:red;
    }
    </style>
    <body>
    	<p class="active">p1<p>
    	<p>p2</p>
    </body>
    
    12345678910
    
    展开全文
  • HTML层次选择器--Javaweb

    2021-05-03 20:58:01
    DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <...
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Untitled Document</title>
        <style type="text/css">
            div, span, p {
                width: 140px;
                height: 140px;
                margin: 5px;
                background: #aaa;
                border: #000000 1px solid;
                float: left;
                font-size: 17px;
                font-family: Verdana;
            }
    
            div.mini {
                width: 55px;
                height: 55px;
                background-color: #aaa;
                font-size: 12px;
            }
    
            div.hide {
                display: none;
            }
        </style>
        <script type="text/javascript" src="../../../../../script/jquery-1.7.2.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                //1.选择 body 内的所有 div 元素
                $("#btn1").click(function () {
                    $("body div").css("background", "#bbffaa");
                });
    
                //2.在 body 内, 选择div子元素
                $("#btn2").click(function () {
                    $("body>div").css("background", "#bbffaa");
                });
    
                //3.选择 id 为 one 的下一个 div 元素
                $("#btn3").click(function () {
                    $("#one+div").css("background", "#bbffaa");
                });
    
                //4.选择 id 为 two 的元素后面的所有 div 兄弟元素
                $("#btn4").click(function () {
                    $("#two~div").css("background", "#bbffaa");
                });
            });
        </script>
    </head>
    <body>
    
    <!-- 	<div>
    		<h1>层级选择器:根据元素的层级关系选择元素</h1>
    		ancestor descendant  :
    		parent > child 		   :
    		prev + next 		   :
    		prev ~ siblings 	   :
    	</div>	 -->
    <input type="button" value="选择 body 内的所有 div 元素" id="btn1"/>
    <input type="button" value="在 body 内, 选择div子元素" id="btn2"/>
    <input type="button" value="选择 id 为 one 的下一个 div 元素" id="btn3"/>
    <input type="button" value="选择 id 为 two 的元素后面的所有 div 兄弟元素" id="btn4"/>
    <br><br>
    <div class="one" id="one">
        id 为 one,class 为 one 的div
        <div class="mini">class为mini</div>
    </div>
    <div class="one" id="two" title="test">
        id为two,class为one,title为test的div
        <div class="mini" title="other">class为mini,title为other</div>
        <div class="mini" title="test">class为mini,title为test</div>
    </div>
    <div class="one">
        <div class="mini">class为mini</div>
        <div class="mini">class为mini</div>
        <div class="mini">class为mini</div>
        <div class="mini"></div>
    </div>
    <div class="one">
        <div class="mini">class为mini</div>
        <div class="mini">class为mini</div>
        <div class="mini">class为mini</div>
        <div class="mini" title="tesst">class为mini,title为tesst</div>
    </div>
    <div style="display:none;" class="none">style的display为"none"的div</div>
    <div class="hide">class为"hide"的div</div>
    <div>
        包含input的type为"hidden"的div<input type="hidden" size="8">
    </div>
    <span id="span">^^span元素^^</span>
    </body>
    </html>
    
    
    
    展开全文
  • HTML层次选择器

    2021-05-16 17:44:15
    HTML层次选择器 1.后代选择器 多层次, 所有后代 例如以下: 所有p都将受到影响 <style> body p{ background-color: #f9ff68; } </style> <body> <p>第一个p</p> <p>第二...

    HTML之层次选择器

    1.后代选择器

    多层次, 所有后代

    例如以下: 所有p都将受到影响

    <style>
        body p{
            background-color: #f9ff68;
        }
    </style>
    
    <body>
        <p>第一个p</p>
        <p>第二个p</p>
        <p>第三个p</p>
        <p>第四个p</p>
        <p>第五个p</p>
        <ul>
            <li><p>1</p></li>
            <li><p>2</p></li>
            <li><p>3</p></li>
            <li><p>4</p></li>
            <li><p>5</p></li>
        </ul>
    </body>
    
    2.子选择器

    一层, 儿子代

    只有儿子这一代受到影响, 儿子再往下都不会被影响

    <style>
        body>p{
                background-color: #b346ff;
        }
    </style>
    
    <body>
        <p>第一个p</p>
        <p>第二个p</p>
        <p>第三个p</p>
        <p>第四个p</p>
        <p>第五个p</p>
        <ul>
            <li><p>1</p></li>
            <li><p>2</p></li>
            <li><p>3</p></li>
            <li><p>4</p></li>
            <li><p>5</p></li>
        </ul>
    </body>
    
    3.相邻兄弟选择器

    当前层, 相邻之间是相同的标签(中间不可以被别的标签间隔), 他的下一个标签就是他的兄弟, 只有这一个兄弟会被影响

    <style>
        #parent+p{
                background-color: #b346ff;
        }
    </style>
    
    <body>
        <p>第一个p</p>
        <p>第二个p</p>
        <p id="parent">第三个p</p>
        <p>第四个p</p>
        <p>第五个p</p>
        <ul>
            <li><p>1</p></li>
            <li><p>2</p></li>
            <li><p>3</p></li>
            <li><p>4</p></li>
            <li><p>5</p></li>
        </ul>
    </body>
    
    4.通用兄弟选择器

    当前层, 往下所有同标签的都是兄弟, 无论是否被别的标签间隔, 都被影响

    <style>
        #parent~p{
                background-color: #b346ff;
        }
    </style>
    
    <body>
        <p>第一个p</p>
        <p>第二个p</p>
        <p id="parent">第三个p</p>
        <p>第四个p</p>
        <p>第五个p</p>
        <ul>
            <li><p>1</p></li>
            <li><p>2</p></li>
            <li><p>3</p></li>
            <li><p>4</p></li>
            <li><p>5</p></li>
        </ul>
    </body>
    
    展开全文
  • 层次选择器

    2018-07-28 16:31:00
    如果想要通过DOM元素之间的层次...在介绍层次选择器之前,我们先在html中写下如下代码,后面所有的操作均在此基础之上。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-...

    如果想要通过DOM元素之间的层次关系来获取特点的元素,如后代元素、子元素、相邻元素和同辈元素等,那个层次选择器是一个非常好的选择。

    在介绍层次选择器之前,我们先在html中写下如下代码,后面所有的操作均在此基础之上。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script type="text/javascript" src="jquery-3.2.1.js"></script>
        <script></script>
    </head>
    <body>
          <h2>层次选择器</h2>
            <div id="orange">
                <span>北京</span>
                <p>
                    <span class="pear">昌平</span>
                </p>
                <span>天津</span>
            </div>
            <span>河北</span>
            <span>辽宁</span>
            <div>
                <span>济南</span>
                <div><span>青岛</span></div>
            </div>
            <span>吉林</span>
            <span>黑龙江</span>
    
    </body>
    </html>

    1、派生选择器

    用于选择父级下所有的派生子级

    $(function(){
      $("div span").css("color","red")
    })

    上面的效果可以用如下的JavaScript代码实现:

    window.onload = function(){
        Array.prototype.forEach.call(document.querySelectorAll('div span'),function(item,index,arr){
            item.style.color = 'red';
       });
    }

    2、父子级选择器

    在给定的父元素下匹配所有[子元素]直接子元素
    $(function(){
      $("div > span").css("color",'#00ffff')
    })

    和上面派生选择器不同,父子级选择器只会匹配直接的子级,而不再匹配孙子级的元素,上面的效果用下面的JavaScript也可以实现:

     window.onload = function(){
         Array.prototype.forEach.call(document.querySelectorAll('div > span'),function(item,index,arr){
             item.style.color = '#00ffff';
         });
     }

    3、prev + next

    匹配[紧接]在 所有prev 元素后的 next(下一个) 元素。
    $(function(){
      $("div + span").css("color","pink"); 
    })

    也可以使用next()方法来替代上面的方法

    $(function(){
       $("div").next("span").css("color","pink"); 
    })

    这个方法是匹配每个div后面的第一个同辈span,对于后面有多个span的,只会匹配第一个。用下面的JavaScript代码也可以实现上面的效果。

     window.onload = function(){
          Array.prototype.forEach.call(document.querySelectorAll('div + span'),function(item,index,arr){
              item.style.color = 'pink';
          });
     }

    4、prev ~ siblings

    匹配 prev 元素之后的所有 siblings 元素。
    $(function(){
       $("#orange ~ span").css("color",'#0000CD'); 
    })

    同上一个方法一样,该方法也有一个类似的替代方法nextAll()。

     $(function(){
       $("#orange").nextAll("span").css("color",'#0000CD'); 
     })

    上一个方法是匹配div后面的第一同辈span,该方法匹配的也是div同辈的span,但是匹配的是后面所有的同辈,而不仅限于一个。用下面的JavaScript代码也可以实现上面的效果。

    window.onload = function(){
         Array.prototype.forEach.call(document.querySelectorAll('div ~ span'),function(item,index,arr){
              item.style.color = '#0000CD';
         });
    }

    5、siblings

     匹配所有的同辈元素。
     $(function(){
           $('#orange').siblings('span').css('color','orange');
     })

    该方法同前面的两个方法都不同,不再只是匹配后面的同辈元素,而是直接匹配所有的同辈元素,不论前后。

     
     
     
     
     
     
     
     
     
     

    转载于:https://www.cnblogs.com/yuyujuan/p/9382447.html

    展开全文
  • 层次选择器: 通过DOM元素间的层次关系获取元素,其主要的层次关系包括后代、父子、相邻、兄弟关系,通过其中基类关系可以方便快捷地定位元素 jQuery选择器详解 根据所获取页面中元素的不同,可以将jQuery选择器分为...
  • 本文实例讲述了jQuery选择器之层次选择器用法。分享给大家供大家参考,具体如下: 前面一篇介绍了几种基本的jQuery选择器,今天归纳一下jQuery的层次选择器。DOM元素之间的层次关系主要包括元素的子元素、后代元素、...
  • CSS层次选择器

    2021-03-29 16:08:46
    层次选择器 1、后代选择器:在某元素后面 祖爷爷 爷爷爸爸 你 /*后代选择器*/ body p{ background: red; } 2、子选择器,一代,儿子 /*子选择器*/ body>p{ background: #3cbda6; } ``` ## 3、相邻兄弟...
  • jQuery基本选择器,层次选择器,基本过滤选择器 一,基本选择器 <!DOCTYPE<!-- html> <html> <head> <meta charset="utf-8"> <title>基本选择器</title><script ...
  • jQuery-选择器(层次选择器) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta ...
  • DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta http-...
  • 转自: ...选择器是jQuery的根基,在jQuery中,对事件处理、遍历DOM和Ajax操作都依赖于选择器。因此,如果能熟练的使用选择器,不仅能简化代码,而且可以达到事半功倍的效果。jQuery选择器完全继承了CS
  • jQuery层次选择器

    2020-07-16 20:49:35
    -- 层次选择器--> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> div, span, p { width: 140px; height: 140px; ...
  • JQuery 层次选择器

    2019-09-27 13:43:32
    <!DOCTYPE HTML> <html> <head>... 使用jQuery层次选择器 </title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> </hea...
  • css3选择器--层次选择器

    千次阅读 2017-06-01 16:29:37
    层次选择器:通过html的dom元素间的层次关系获取元素,主要层次关系有 后代、父子、相邻兄弟和通用兄弟。 1. 后代选择器: E F, 作用的是选择元素的后代元素。包括子元素、孙辈元素等。(常用) div div{ color...
  • 上一讲我们讲解了CSS3中的基本选择器,这一节我们详解下层次选择器。 什么是层次选择器 我们都知道DOM是一个树状结构,在树状结构中有根节点、父节点、子节点、兄弟节点等概念。CSS也引入了这些概念到选择器中,对应...
  • jQuery 层次选择器

    2015-01-26 16:48:29
    1.层次选择器 ``` <html> <head> <meta charset="UTF-8"> <title>层次选择器</title> <style type="text/css"> * { margin: 0; padd...
  • 02-层次选择器.html 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/x...
  • JQuery层次选择器

    2018-08-18 16:53:11
    子元素选择器(直接父子关系) 后代元素选择器(后代所有,包括孙子关系) 相邻元素选择器(紧邻元素的下一个元素) 兄弟元素选择器(所有与元素同级的) 示例:运用这四个选择器 &lt;!DOCTYPE html&gt...
  • CSS之层次选择器

    2020-11-30 14:05:10
    层次选择器 演示代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> /*后代选择器*/ /* body p{ ...
  • jQuery层次选择器用法

    2019-10-20 10:17:36
    2:jQuery层次选择器 2.1: ancestor descendant选择器 概念: ancesdor descendant选择器中ancestor代表祖先,descendant代表子孙,用于在给定的祖先元素下匹配所有的后代元素 HTML代码: <form> <label&...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 825
精华内容 330
关键字:

html层次选择器