精华内容
下载资源
问答
  • 2021-06-11 01:31:03

    层次选择器通过HTML的DOM元素间的层次关系获取元素,其主要层次关系包括后代、父子、相邻兄弟和通用兄弟几种关系,通过其中某类关系可以方便快捷地选定需要的元素。

    层次选择器

    后代选择器

    后代选择器(E F)就是可以选择某元素的后代元素。例如E为祖先元素,F为后代元素,表达的意识就是选择E元素的所有后代F元素,这里的F元素不管是E元素的子元素、孙辈元素或者更深层次的关系,都将被选中。

    ul em {color:red; font-weight:bold;}

    • List item 1
      1. List item 1-1
      2. List item 1-2
      3. List item 1-3
        1. List item 1-3-1
        2. List item 1-3-2 <<========
        3. List item 1-3-3
      4. List item 1-4
    • List item 2
    • List item 3

    子选择器

    子选择器(E > F)只能选择某个元素的子元素,其中E为父元素,F为子元素,其中 E > F 表示选择了E元素下所有子元素F。

    例如,如果您希望选择只作为 h1 元素子元素的 strong 元素,可以这样写:

    h1 > strong {color:red;}

    This is

    very

    very

    important.

    This is

    really

    very

    important.

    这个规则会把第一个 h1 下面的两个 strong 元素变为红色,但是第二个 h1 中的 strong 不受影响。

    相邻兄弟选择器

    相邻兄弟选择器(E + F)选择紧接在另一个元素后的元素,它们具有一个相同的父元素,E和F是同辈元素,E在F的前面,且相邻,记住选中的是F。

    ul + ol {font-weight:bold;}

    • List item 1
    • List item 2
    • List item 3
    1. <<====================
    2. List item 1
    3. List item 2
    4. List item 3
    1. List item 1
    2. List item 2
    3. List item 3

    这个规则会把ul后面紧接着第一个ol元素字体变粗,第二个及其后面的不受影响。

    通用兄弟选择器

    通用兄弟选择器(E~F)是CSS3新增加的,用于选择某元素后面的所有兄弟元素,它们和相邻兄弟选择器类似,需要在同一个父元素之中。

    ul ~ ol {font-weight:bold;}

    • List item 1
    • List item 2
    • List item 3
    1. <<====================
    2. List item 1
    3. List item 2
    4. List item 3
    1. List item 1
    2. List item 2
    3. List item 3

    这个规则会把ul后面所有的ol元素。

    比较

    后代选择器,选择E元素的所有后代F元素

    子选择器,选择E元素的所有子F元素

    相邻兄弟选择器,E和F是同辈元素,选择E后面紧挨着的F元素

    通用兄弟选择器,E和F是同辈元素,选中E后面的所有的F元素

    更多相关内容
  • 层次选择器: 通过DOM元素间的层次关系获取元素,其主要的层次关系包括后代、父子、相邻、兄弟关系,通过其中基类关系可以方便快捷地定位元素 jQuery选择器详解 根据所获取页面中元素的不同,可以将jQuery选择器分为...
  • jquery层次选择器包括空格、>、next、+、nextAll、~、siblings、prev()、prevAll()等函数或表达式。 1、空格表示获取所有子孙后代元素 2、 >表示获取一级子元素 3、next函数获取紧接在之后的同辈元素列表 4、...
  • 本文实例讲述了jQuery选择器之层次选择器用法。分享给大家供大家参考,具体如下: 前面一篇介绍了几种基本的jQuery选择器,今天归纳一下jQuery的层次选择器。DOM元素之间的层次关系主要包括元素的子元素、后代元素、...
  • jquery 层次选择器包括siblings与nextAll,本文为大家介绍下具体的使用方法,想学习的朋也可以参考下,希望对大家有所帮助
  • 上一讲我们讲解了CSS3中的基本选择器,这一节我们详解下层次选择器。 什么是层次选择器 我们都知道DOM是一个树状结构,在树状结构中有根节点、父节点、子节点、兄弟节点等概念。CSS也引入了这些概念到选择器中,对应...

    上一讲我们讲解了CSS3中的基本选择器,这一节我们详解下层次选择器。

    什么是层次选择器

    我们都知道DOM是一个树状结构,在树状结构中有根节点、父节点、子节点、兄弟节点等概念。CSS也引入了这些概念到选择器中,对应的关系就是层次选择器。层次选择器共有四种,分别为:

    • 后代选择器(E F)
    • 子选择器(E>F)
    • 相邻兄弟选择器(E+F)
    • 通用兄弟选择器(E~F)

    在Web开发中,用的较多的是前两个-后代选择器和子选择器。
    我们先来看一段代码:

    <!DOCTYPE html>
            <html lang="en-US">
              <head>
                <meta charset="utf-8">
                <title>使用CSS3层次选择器</title>
                <style type="text/css">
                  * {margin:0;padding:0;}
                  body {width: 300px; margin:0 auto;}
                  div{margin:5px;padding:5px;border:1px solid #ccc;}
                </style>
              </head>
              <body>
                <div class="active">1</div>
                <div>2</div>
                <div>3</div>
                <div>4
                  <div>5</div>
                  <div>6</div>
                </div>
                <div>7
                  <div>8
                    <div>9
                      <div>10</div>
                    </div>
                  </div>
                </div>
              </body>
            </html>
    

    后代选择器

    所谓的后代选择器,就是用来选择某个元素的所有的后代元素,比如上面的html中,使用如下的样式,会产生什么效果呢?

    body div { background-color: yellow; }
    

    这里将body元素的后代div元素设置背景色为yellow。也就是说,所有的div都被染上了黄色。

    子选择器

    所谓的子选择器,就是选择某个元素下(可能是多个元素)所有的一级子元素。比如,我们使用下面的选择器及样式,会有什么效果呢?

    body > div { background-color: red; }
    

    这样设置后,body下的一级div元素,这里是内容为1、2、3、4、7的div元素设置背景色为红色。

    相邻兄弟选择器

    相邻兄弟指的是某个(或某些)元素同级目录下的下一个元素。比如,这里我们使用下面样式设置后的效果是什么样的呢?

    .active + div { background-color: green; }
    

    这里我们设置了.active选择器的相邻兄弟节点,也就是第二个div元素,将其背景色设置为了绿色。

    通用兄弟选择器

    所谓的通用兄弟,就是某个(或某些)元素的同级目录下所有的后面的标记。它和相邻兄弟选择器类似,需要在同一个父元素中。
    比如使用下面的代码,影响到的样式:

    .active ~ div { background-color: pink; }
    

    这里将类名为"active"的元素(这里为第一个div)的通用兄弟(这里是内容为2、3、4、7的div)设置了背景色为粉红色。

    展开全文
  • 1.层次选择器 选择器 类型 功能描述 E F 后代选择器 选择匹配的F元素,且匹配的F元素被包含在匹配的E元素内 E>F 子选择器 选择匹配的F元素,且匹配的F元素是匹配的E元素的子元素 ...

    1.层次选择器

    选择器类型功能描述
    E F后代选择器选择匹配的F元素,且匹配的F元素被包含在匹配的E元素内
    E>F

    子选择器

    选择匹配的F元素,且匹配的F元素是匹配的E元素的子元素
    E+F相邻兄弟选择器选择匹配的F元素,且匹配的F元素紧位于匹配的E元素后面
    E~F通用兄弟选择器选择匹配的F元素,且位于匹配的E元素的所有匹配的F元素

    层次选择器,就是通过元素之间的层次关系来选择元素的一种基础选择器。层次选择器在实际开发中也是相当重要的。常见的层次关系包括:父子、后代、兄弟、相邻。

    1.1后代选择器

    语法规范:

    <style>(选择匹配的F元素,且匹配的F元素被包含在匹配的E元素内)

    E F {

    color: blue

    }

    </style>

    案例:

    <style>li被ul包裹的情况下,即li为ul的后代级别,颜色变红)

    ul li {

    color:red

    }

    </style>

    <ul>

        <li>我是ul里面的li</li>

    </ul>

    <div>(li被div包裹的情况下不会变红)

            <li>我是div里面的li</li>

    </div>

    <ul>(li是ul的孙子级别)

    <p>

        <li>我是ul里面的li</li>

    </p>

    </ul>

    1.2子选择器

    语法规范:

    <style>

    E > F{

    color:red

    }

    </style>

    案例:

    <style>(li元素中包裹的子元素p 显示为红色 >左右可以添加空格)

            li>p {

                color: red

            }

        </style>

     <ul>

            <li>(p元素为li的子元素可显示为红色)

                <p>我是li里面的p</p>

            </li>

            <li>(p元素为li的孙子元素则不显示红色)

                <div>

                    <p>我是li里面的p</p>

                </div>

            </li>

            <li>(p元素为li的子元素可显示为红色)

                <p>我是li里面的p</p>

            </li>

        </ul>

        <p>(p元素不是li的子元素则不显示红色)

            我是p元素

        </p>

    1.3相邻兄弟选择器

    语法规范:

    <style>

            .active+标签{

                background: red;

            }

        </style>

    案例:

    <style>(类选择器active相邻的下一个li背景色变红,即我是li2背景色变红)

            .active+li{

                background: red;

            }

        </style>

        <ui>

            <li class="active">我是li1</li>

            <li>我是li2</li>

            <li>我是li3</li>

        </ui>

    1.4通用兄弟选择器

    语法规范:

    <style>

        .active~标签{

            background: red

        }

    </style>

    案例:

    <style>(shift+上面一排键盘的波浪号)

    .active~li{

            background: red

    }( 类选择器active下面的所有li标签都会变成红色)

     </style>

    <ul>

            <li>我是飞行员¥</li>

            <li class="active">我是飞行员¥</li>

            <li>我是飞行员¥</li>

            <li>我是飞行员¥</li>

            <li>我是飞行员¥</li>

    </ul>

    2.属性选择器

    属性选择器功能描述
    E[attr]选择匹配具有属性attr的E元素
    E[attr=val]选择匹配具有属性attr的E元素,并且属性值为val(其中val区分大小写)
    E[attr^=val]选择匹配元素E,且E元素定义了属性attr,其属性值是以val开头的任意字符串
    E[attr$=val]选择匹配元素E,且E元素定义了属性attr,其属性值是以val结尾的任意字符串
    E[attr*=val]选择匹配元素E,且E元素定义了属性attr,其属性值包含了“val“,换句话说,字符串val与属性值中的任意位置相匹配

    属性选择器可以根据元素的属性及属性值来选择元素。

    2.1属性选择器1

    语法案例展示:

    <style>( []表示属性的意思,里面写具体属性的名称比如[id] )

            li[id]{

                background: red;

            }

        </style>

        <ol>

            <li>我爱我家</li>

            <li>我爱我家</li>

            <li id>我爱我家</li>(该li背景即变为红色)

            <li>我爱我家</li>

            <li>我爱我家</li>

        </ol>

    2.2E[attr=val]属性选择器

    语法案例展示:

        <style>(dd元素中class的值为two的背景颜色变成蓝色)

            dd[class=two]{

                background: cyan;

            }

        </style>

        <dl>

            <dt>标题</dt>

            <dd class="one">我是定义列表1</dd>

            <dd class="one">我是定义列表2</dd>

            <dd class="two">我是定义列表3</dd>

        </dl>

    2.3E[attr*=val]属性选择器

    语法案例展示:

    <style>( p元素中class的值只要包含b的都会变成红色(大小写是区分的 如果值是小写,你*后面的大写,元素是不能被找到的) )

            p[class*=b]{

                background: red;

            }

    </style>

        <div>

            <p class="abc">111</p>

            <p class="bbb">222</p>

            <p class="ccc">333</p>

        </div>

    2.4E[attr^=val]属性选择器

    语法案例展示:

     <style>(属性href是以http开头的a元素 背景色变成红色

        在遇到匹配的字符有特殊符号 比如://可以使用引号 )

            a[href^=http]{

                background: red;

            }

       </style>

    </head>

    <body>

        <a href="http://www.baidu.com">跳转百度</a>

        <a href="www.baidu.com">不能跳转百度</a>(开头没有http所以不能实现跳转)

    </body>

     <style>

           p[class^=ab]{

                background: red;

            }

       </style>

    <div>

            <p class="abtxer">我是泥蝶</p>

            <p class="abtxer">我是泥蝶</p>

            <p class="actxer">我是泥蝶</p>(此段落class值开头为ac,所以不能变为红色)

        </div>

    2.5E[attr$=val]属性选择器

    语法案例展示:

    (E[attr$=val] 选择匹配元素E,且E元素定义了attr,其属性值是一val结尾的任意字符串)

        <style>

            a[href$=cn]{

                color: red;

            }

        </style>

        <a href="http://www.baidu.com">能跳转百度</a>

        <a href="http://www.baidu.cn">因为百度吧.cn的域名也买了所以也能跳</a>

     

    <style>

     input[type$=er]{

    color:red

    }

    <input type="abcer">1</input>

    <input type="abder">1</input>

    <input type="abces">1</input>(val值末位并非er,所以文本框内不能变红色)

    3.今日小结

    层次选择器文本解释相对简洁,容易理解,属性选择器如E[attr*=val]属性选择器等,看似复杂实际只要能够理解E、attr、val所代表的含义就很容易理解了,E为元素即标签(例如:input type="radio“中的input)attr为元素的属性(例如:input type="radio“中的type)val为value的缩写,即为元素的值(例如:input type="radio“中的radio)剩下只要记住attr后缀的符号便可理解不同属性选择器的作用。E[attr=val]属性选择器相对更为常用。

    展开全文
  • jQuery选择器完全继承了CSS选择的风格,将jQuery选择器分为4类:基本选择器、层次选择器、过滤选择器和表单选择器。 基本选择器 基本选择器是jQuery中最常用的选择器,通过元素的id、className或tagName来查找页面中...

    jQuery选择器

    通过jQuery选择器可以方便快捷地获得页面中的元素,然后为其添加相应行为,无需担心浏览器的兼容性问题。jQuery选择器完全继承了CSS选择的风格,将jQuery选择器分为4类:基本选择器、层次选择器、过滤选择器和表单选择器。

    基本选择器

    基本选择器是jQuery中最常用的选择器,通过元素的id、className或tagName来查找页面中的元素,如下表:

    选择器描述返回
    #ID根据元素的ID进行匹配单个jQuery对象
    .class根据元素的class属性进行匹配jQuery对象数组
    element根据元素的标签名进行匹配jQuery对象数组
    selector1,selectot2,…,selectorN将每个选择器匹配的结果合并后一起返回jQuery对象数组
    *匹配页面的所有元素,包括html、head、body等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="idDiv">idDIv</div>
    		<div class="classDiv" style="border: 1px;">classDiv</div>
    		<div class="classDiv">classDiv</div>
    		<span class="classSpan">classSpan</span>
    		<script type="text/javascript">
    			$(function(){
    				$("#idDiv").css("color","blue");
    				$(".classDiv").css("background-color", "#dddddd");
    				$("span").css("font-size", "40px");
    				$("#idDiv,.classSpan").css("font-style","italic");
    			});
    		</script>
    	</body>
    </html>
    

    在这里插入图片描述

    层次选择器

    jQuery层次选择器是通过DOM对象的层次关系来获取特定的元素,如同辈元素、后代元素、子元素和相邻元素等。层次选择器的用法与基本选择器相似,也是使用$()函数来实现,返回结果均为jQuery对象数组。

    选择器描述返回
    $(“ancestor descendant”)选取ancestor元素中的所有的子元素jQuery对象数组
    $(“parent > child”)选择parent元素中的直接子元素jQuery对象数组
    $(“prev+next”)选取紧邻prev元素之后的next元素jQuery对象数组
    $(“prev~siblings”)选取prev元素之后的siblings兄弟元素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>
    			搜索条件<input name="search"/>
    			<form>
    				<label>用户名:</label>
    				<input name="userName" />
    				<fieldset>
    					<label>密  码:</label>
    					<input name="password" />
    				</fieldset>
    			</form>
    			<hr />
    			身份证号:<input name="none" /><br />
    			联系电话:<input naem="none"/>
    		</div>
    		<script type="text/javascript">
    			$(function(){
    				//form下的所有input
    				$("form input").css("width","200px");
    				//form的直接子元素input
    				$("form>input").css("background","pink");
    				//紧邻label的input
    				$("label+input").css("border-color","blue");
    				//$("label").next("input").css("border-color","blue");
    				//form之后相邻的input
    				$("form~input").css("border-bottom-width","5px");
    				//$("form").nextAll("input").css("border-bottom-width","4px");
    				$("*").css("padding-top","10px");
    			});
    		</script>
    	</body>
    </html>
    

    在这里插入图片描述

    展开全文
  • jQuery中的层次选择器

    2022-02-26 11:41:26
    jQuery中的层次选择器 常见的层次关系包括:父子、后代、兄弟、相邻。 $(“M N”) 等价于 $(M).find(N);表示选择后代。 $(“M>N”) 等价于 $(M).children(N);表示选择子代。 $(“M~N”) 等价于 $(M).nextAll(N...
  • 1.基本选择器 $("#id") //ID选择器 $("div") //元素选择器 $(".classname"...2.层次选择器 $("#id&gt;.classname ") //子元素选择器 $("#id .cla
  • CSS层次选择器[四种]

    2022-02-07 11:54:25
    1.后代选择器 后代选择器包含了后面的所以标签如: 2.子选择器 3.相邻选择器 4.相邻选择器进阶版
  • jQuery选择器详细介绍:基本选择器,层次选择器,属性选择器
  • CSS层次选择器

    2021-12-17 17:16:19
    CSS层次选择器 测试代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>层次选择器</title> <style> <!--1.后代选择器--> body p{ ...
  • 层次选择器的4种选择器列表

    千次阅读 2019-06-21 09:16:52
    选择器 描述 返回 示例 $("ancestor descendant") 选取ancestor元素里的所有descendant(后代)元素 集合元素span $("div span")选取<div>里的所有的<span>元素 $("parent > ...
  • WEB前端 -- 属性选择器与层次选择器

    千次阅读 2018-03-05 08:26:42
    1.层次选择器层次选择器选择器CSS模式JQuery模式描述后代选择器ul li a{}$('ul li a')获取追溯到的多个DOM对象子选择器div &gt; p{}$('div p')只获取子类节点的多个DOM对象next选择器div + p{}$('div + p')只...
  • 选择器 说明 M N 后代选择器,选择M元素内部后代的N元素(所有N元素) M>N 子代选择器,选择M元素内部子代的N元素(所有第1级N元素) M~N 兄弟选择器,选择M元素后所有的统计N元素 M+N 相邻选择器,...
  • 层次选择器 结构关系图 层次选择器总共有四种选择器分别是: 后代选择器:在某一元素后面,(包含后代所有) 子代选择器:一代 相邻选择器:该元素被选中后的相邻下一个 通用选择器:该元素以及向下的所有同类元素...
  • 【jquery】jquery选择器有哪些

    千次阅读 2020-03-25 16:05:06
    4大类:基本选择器、层次选择器、过滤选择器、表单选择器 目录 1、jquery基本选择器 2、jquery层次选择器 3、jquery过滤选择器 4、jquery表单选择器 1、jquery基本选择器 基本选择器是JQuery最常用的选择器,...
  • css3选择器--层次选择器

    千次阅读 2017-06-01 16:29:37
    层次选择器:通过html的dom元素间的层次关系获取元素,主要层次关系有 后代、父子、相邻兄弟和通用兄弟。 1. 后代选择器: E F, 作用的是选择元素的后代元素。包括子元素、孙辈元素等。(常用) div div{ color...
  • css层次选择器的理解

    千次阅读 2017-10-15 15:43:45
    } 表示的是从h1开始里面包含的所有的em元素变成红色,h1为祖先,其他的em都是后代,即选中后代,不管是儿子还是孙子,只要是都会被选中,为后代选择器。 (2)语法:h1>em{color:red;} 仅仅选择直接子元素em,子元素...
  • CSS基础----层次选择器

    2020-06-05 18:35:32
    层次选择器 测试代码 后代选择器 E F { } 功能描述:影响的F元素被包含在E元素内(E影响下面所有层次的元素F) 只打开后代选择器的代码,不打开的都默认注释掉 /*后代选择器*/ body p{ background: red; } ...
  • 内容过滤选择器:根据元素中的文字内容或所包含的子元素特征获取元素,其文字内容可以模糊或绝对匹配进行元素定位 jQuery选择器详解 根据所获取页面中元素的不同,可以将jQuery选择器分为:基本选择器、层次选择器、...
  • 在CSS中的学习中,选择器是其中一个重要的内容,想要全部理解透彻也需花费一点时间。下面分为五大类来理解每一种选择器。 基本选择器 1.标签选择器 即选择页面上所有该标签,经常用来描述必要的共同特性。 举例: &...
  • JQ 选择器大全包含:基本选择器,层级选择器,层级函数,过滤选择器,内容选择器,可见选择器,jq中显示相关的函数,属性选择器,子元素选择器,表单选择器。里面的练习题可以拿来练手
  • jQuery里面的选择器(基本,层次,内容,属性)超级详细每一步都有步骤
  • jQuery层次选择器

    千次阅读 2018-07-28 12:13:51
    层次选择器 通过DOM元素之间的结构(层次关系)来获取特定元素,例如后代元素、子元素、相邻元素、兄弟元素等。 层次选择器 选择器 描述 返回 示例 $("ancestor descendant") 选取...
  • jQuery 层次选择器

    2021-05-21 14:09:30
    jQuery 层次选择器 jQuery 层次选择器 (0)测试前的准备工作 A. 定义测试对象 B. 定义测试对象的 CSS 样式 C. 再定义一些测试用的 button。 (1)所有后代选择器(A B) 所有后代,包括其直接后代及间接后代。 (2)...
  • 而class属性本身没有语义,它纯粹是用来为CSS服务的,属于多余属性,并没把样式和元素绑定起来,一个CSS类选择器,文本框可以使用,下拉框也可以使用,甚至按钮也可以使用,这样其实非常混乱, 修改时就不方便,所以...
  • 7) $('div>p') 与上一个层次选择器差不多,但是div下面有子元素,子元素下还有孙元素,该选择器只能选子元素 8) $('div+p') 该选择器用得很少表示div相邻下一个选择器,(必须是相同层次元素并且紧挨的) ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 265,793
精华内容 106,317
关键字:

层次选择器包括