层次选择器包括 CSS选择器（2）——层次选择器
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
List item 1-1
List item 1-2
List item 1-3
List item 1-3-1
List item 1-3-2 <<========
List item 1-3-3
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

<<====================
List item 1
List item 2
List item 3

List item 1
List item 2
List item 3

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

通用兄弟选择器

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

ul ~ ol {font-weight:bold;}

List item 1
List item 2
List item 3

<<====================
List item 1
List item 2
List item 3

List item 1
List item 2
List item 3

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

比较

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

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

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

通用兄弟选择器，E和F是同辈元素，选中E后面的所有的F元素
更多相关内容
jQuery层次选择器选择元素使用介绍
2020-12-09 19:04:36

层次选择器：通过DOM元素间的层次关系获取元素，其主要的层次关系包括后代、父子、相邻、兄弟关系，通过其中基类关系可以方便快捷地定位元素 jQuery选择器详解根据所获取页面中元素的不同，可以将jQuery选择器分为...

收起
jquery层次选择器的介绍
2021-01-21 13:26:27

jquery层次选择器，包括空格、>、next、+、nextAll、~、siblings、prev()、prevAll()等函数或表达式。 1、空格表示获取所有子孙后代元素 2、 >表示获取一级子元素 3、next函数获取紧接在之后的同辈元素列表 4、...

收起
jQuery选择器之层次选择器用法实例分析
2020-12-29 18:57:50

本文实例讲述了jQuery选择器之层次选择器用法。分享给大家供大家参考，具体如下：前面一篇介绍了几种基本的jQuery选择器，今天归纳一下jQuery的层次选择器。DOM元素之间的层次关系主要包括元素的子元素、后代元素、...

收起
jquery 层次选择器siblings与nextAll的区别介绍
2020-10-27 01:25:28

jquery 层次选择器包括siblings与nextAll，本文为大家介绍下具体的使用方法，想学习的朋也可以参考下，希望对大家有所帮助

收起
详解CSS3中的选择器（二）层次选择器
2020-06-02 22:56:06
上一讲我们讲解了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）设置了背景色为粉红色。
收起
展开全文
css

CSS层次选择器和属性选择器

2022-03-24 13:41:42

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后代选择器

语法规范：

E F {

color： blue

}

</style>

案例：

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>

案例：

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>

案例：

.active+li{

background: red;

}

</style>

<ui>

</ui>

1.4通用兄弟选择器

语法规范：

<style>

.active~标签{

background: red

}

</style>

案例：

.active~li{

background: red

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

</style>

<ul>

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

<li class="active">我是飞行员￥</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

语法案例展示：

li[id]{

background: red;

}

</style>

<ol>

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

</ol>

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

语法案例展示：

dd[class=two]{

background: cyan;

}

</style>

<dl>

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

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

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

</dl>

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

语法案例展示：

p[class*=b]{

background: red;

}

</style>

<div>

</div>

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

语法案例展示：

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

a[href^=http]{

background: red;

}

</style>

</head>

<body>

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

</body>

<style>

p[class^=ab]{

background: red;

}

</style>

<div>

<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="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]属性选择器相对更为常用。

收起

展开全文

css3

jQuery--选择器（基本选择器、层次选择器）详解

千次阅读 2019-10-01 09:52:50

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 选择器基本选择器

jQuery中的层次选择器
2022-02-26 11:41:26

jQuery中的层次选择器 常见的层次关系包括：父子、后代、兄弟、相邻。 $(“M N”) 等价于 $(M).find(N)；表示选择后代。 $(“M>N”) 等价于 $(M).children(N)；表示选择子代。 $(“M~N”) 等价于 $(M).nextAll(N...

收起

jquery javascript css
jQuery 选择器汇总（基本选择器、层次选择器、过滤选择器）
2018-11-23 18:16:02

1.基本选择器 $("#id") //ID选择器 $("div") //元素选择器 $(".classname"...2.层次选择器 $("#id>.classname ") //子元素选择器 $("#id .cla

收起
CSS层次选择器[四种]
2022-02-07 11:54:25

1.后代选择器 后代选择器是包含了后面的所以标签如: 2.子选择器 3.相邻选择器 4.相邻选择器进阶版

收起

css css3
jQuery选择器详细介绍：基本选择器，层次选择器，属性选择器
千次阅读 2016-10-18 10:18:16

jQuery选择器详细介绍：基本选择器，层次选择器，属性选择器

收起

基本选择器属性选择器
CSS层次选择器
2021-12-17 17:16:19

CSS层次选择器测试代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>层次选择器</title> <style>  body p{ ...

收起

css css3 html
层次选择器的4种选择器列表
千次阅读 2019-06-21 09:16:52

选择器 描述返回示例 $("ancestor descendant") 选取ancestor元素里的所有descendant（后代）元素集合元素span $("div span")选取<div>里的所有的<span>元素 $("parent > ...

收起

jquery
WEB前端 -- 属性选择器与层次选择器
千次阅读 2018-03-05 08:26:42

1.层次选择器层次选择器选择器CSS模式JQuery模式描述后代选择器ul li a{}$('ul li a')获取追溯到的多个DOM对象子选择器div > p{}$('div p')只获取子类节点的多个DOM对象next选择器div + p{}$('div + p')只...

收起

属性选择器
层次选择器（父子、后代、兄弟、相邻）
千次阅读 2020-11-30 15:09:42

选择器 说明 M N 后代选择器，选择M元素内部后代的N元素（所有N元素） M>N 子代选择器，选择M元素内部子代的N元素（所有第1级N元素） M~N 兄弟选择器，选择M元素后所有的统计N元素 M+N 相邻选择器，...

收起

css
P3.CSS高级选择器1（层次选择器）
2020-08-05 11:00:13

层次选择器 结构关系图 层次选择器总共有四种选择器分别是：后代选择器：在某一元素后面，（包含后代所有）子代选择器：一代相邻选择器：该元素被选中后的相邻下一个通用选择器：该元素以及向下的所有同类元素...

收起

css css3
【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 jQuery
CSS基础----层次选择器
2020-06-05 18:35:32

层次选择器 测试代码后代选择器 E F { } 功能描述：影响的F元素被包含在E元素内（E影响下面所有层次的元素F）只打开后代选择器的代码，不打开的都默认注释掉 /*后代选择器*/ body p{ background: red; } ...

收起
使用jQuery内容过滤选择器选择元素实例讲解
2021-01-21 12:56:01

内容过滤选择器：根据元素中的文字内容或所包含的子元素特征获取元素，其文字内容可以模糊或绝对匹配进行元素定位 jQuery选择器详解根据所获取页面中元素的不同，可以将jQuery选择器分为：基本选择器、层次选择器、...

收起
blog-CSS之选择器（基本选择器+层次选择器）
2019-08-01 10:08:38

在CSS中的学习中，选择器是其中一个重要的内容，想要全部理解透彻也需花费一点时间。下面分为五大类来理解每一种选择器。基本选择器 1.标签选择器 即选择页面上所有该标签，经常用来描述必要的共同特性。举例： &...

收起
jQuery基础选择器练习题
2018-07-11 17:16:47

JQ 选择器大全包含：基本选择器,层级选择器,层级函数,过滤选择器,内容选择器,可见选择器,jq中显示相关的函数,属性选择器,子元素选择器,表单选择器。里面的练习题可以拿来练手

收起
jQuery四大选择器（基本，层次，内容，属性）超级详细
千次阅读 2022-04-02 10:06:23

jQuery里面的选择器（基本，层次，内容，属性）超级详细每一步都有步骤

收起

javascript
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）...

收起

java css 软件测试
css3选择器--基本选择器，层次选择器，属性选择器
万次阅读 2016-12-05 23:35:27

而class属性本身没有语义，它纯粹是用来为CSS服务的，属于多余属性，并没把样式和元素绑定起来，一个CSS类选择器，文本框可以使用，下拉框也可以使用，甚至按钮也可以使用，这样其实非常混乱，修改时就不方便，所以...

收起

css3
JQUERY选择器　id选择器 2)　$('.class')　css选择器,class类名
2022-05-28 18:08:38

7）　$('div>p')　与上一个层次选择器差不多,但是div下面有子元素,子元素下还有孙元素,该选择器只能选子元素 8）　$('div+p')　该选择器用得很少表示div相邻下一个选择器,(必须是相同层次元素并且紧挨的） ...

收起

This is

This is

jQuery层次选择器选择元素使用介绍

jquery层次选择器的介绍

jQuery选择器之层次选择器用法实例分析

jquery 层次选择器siblings与nextAll的区别介绍

详解CSS3中的选择器（二）层次选择器

什么是层次选择器

CSS层次选择器和属性选择器

1.层次选择器

1.1后代选择器

1.2子选择器

1.3相邻兄弟选择器

1.4通用兄弟选择器

2.属性选择器

2.1属性选择器1

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

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

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

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

3.今日小结

jQuery--选择器（基本选择器、层次选择器）详解

jQuery选择器

基本选择器

层次选择器

jQuery中的层次选择器

jQuery 选择器汇总（基本选择器、层次选择器、过滤选择器）

CSS层次选择器[四种]

jQuery选择器详细介绍：基本选择器，层次选择器，属性选择器

CSS层次选择器

层次选择器的4种选择器列表

WEB前端 -- 属性选择器与层次选择器

层次选择器（父子、后代、兄弟、相邻）

P3.CSS高级选择器1（层次选择器）

【jquery】jquery选择器有哪些

css3选择器--层次选择器

css层次选择器的理解

CSS基础----层次选择器

使用jQuery内容过滤选择器选择元素实例讲解

blog-CSS之选择器（基本选择器+层次选择器）

jQuery基础选择器练习题

jQuery四大选择器（基本，层次，内容，属性）超级详细

jQuery层次选择器

jQuery 层次选择器

css3选择器--基本选择器，层次选择器，属性选择器

JQUERY选择器 id选择器 2) $('.class') css选择器,class类名

层次选择器包括

JQUERY选择器　id选择器 2)　$('.class')　css选择器,class类名