-
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元素
更多相关内容 - List item 1
-
jQuery层次选择器选择元素使用介绍
2020-12-09 19:04:36层次选择器: 通过DOM元素间的层次关系获取元素,其主要的层次关系包括后代、父子、相邻、兄弟关系,通过其中基类关系可以方便快捷地定位元素 jQuery选择器详解 根据所获取页面中元素的不同,可以将jQuery选择器分为... -
jquery层次选择器的介绍
2021-01-21 13:26:27jquery层次选择器,包括空格、>、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:28jquery 层次选择器包括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层次选择器和属性选择器
2022-03-24 13:41:421.层次选择器 选择器 类型 功能描述 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--选择器(基本选择器、层次选择器)详解
2019-10-01 09:52:50jQuery选择器完全继承了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:26jQuery中的层次选择器 常见的层次关系包括:父子、后代、兄弟、相邻。 $(“M N”) 等价于 $(M).find(N);表示选择后代。 $(“M>N”) 等价于 $(M).children(N);表示选择子代。 $(“M~N”) 等价于 $(M).nextAll(N... -
jQuery 选择器汇总(基本选择器、层次选择器、过滤选择器)
2018-11-23 18:16:021.基本选择器 $("#id") //ID选择器 $("div") //元素选择器 $(".classname"...2.层次选择器 $("#id>.classname ") //子元素选择器 $("#id .cla -
CSS层次选择器[四种]
2022-02-07 11:54:251.后代选择器 后代选择器是包含了后面的所以标签如: 2.子选择器 3.相邻选择器 4.相邻选择器进阶版 -
jQuery选择器详细介绍:基本选择器,层次选择器,属性选择器
2016-10-18 10:18:16jQuery选择器详细介绍:基本选择器,层次选择器,属性选择器 -
CSS层次选择器
2021-12-17 17:16:19CSS层次选择器 测试代码 <!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:421.层次选择器层次选择器选择器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 相邻选择器,... -
P3.CSS高级选择器1(层次选择器)
2020-08-05 11:00:13层次选择器 结构关系图 层次选择器总共有四种选择器分别是: 后代选择器:在某一元素后面,(包含后代所有) 子代选择器:一代 相邻选择器:该元素被选中后的相邻下一个 通用选择器:该元素以及向下的所有同类元素... -
【jquery】jquery选择器有哪些
2020-03-25 16:05:064大类:基本选择器、层次选择器、过滤选择器、表单选择器 目录 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内容过滤选择器选择元素实例讲解
2021-01-21 12:56:01内容过滤选择器:根据元素中的文字内容或所包含的子元素特征获取元素,其文字内容可以模糊或绝对匹配进行元素定位 jQuery选择器详解 根据所获取页面中元素的不同,可以将jQuery选择器分为:基本选择器、层次选择器、... -
blog-CSS之选择器(基本选择器+层次选择器)
2019-08-01 10:08:38在CSS中的学习中,选择器是其中一个重要的内容,想要全部理解透彻也需花费一点时间。下面分为五大类来理解每一种选择器。 基本选择器 1.标签选择器 即选择页面上所有该标签,经常用来描述必要的共同特性。 举例: &... -
jQuery基础选择器练习题
2018-07-11 17:16:47JQ 选择器大全包含:基本选择器,层级选择器,层级函数,过滤选择器,内容选择器,可见选择器,jq中显示相关的函数,属性选择器,子元素选择器,表单选择器。里面的练习题可以拿来练手 -
jQuery四大选择器(基本,层次,内容,属性)超级详细
2022-04-02 10:06:23jQuery里面的选择器(基本,层次,内容,属性)超级详细每一步都有步骤 -
jQuery层次选择器
2018-07-28 12:13:51层次选择器 通过DOM元素之间的结构(层次关系)来获取特定元素,例如后代元素、子元素、相邻元素、兄弟元素等。 层次选择器 选择器 描述 返回 示例 $("ancestor descendant") 选取... -
jQuery 层次选择器
2021-05-21 14:09:30jQuery 层次选择器 jQuery 层次选择器 (0)测试前的准备工作 A. 定义测试对象 B. 定义测试对象的 CSS 样式 C. 再定义一些测试用的 button。 (1)所有后代选择器(A B) 所有后代,包括其直接后代及间接后代。 (2)... -
css3选择器--基本选择器,层次选择器,属性选择器
2016-12-05 23:35:27而class属性本身没有语义,它纯粹是用来为CSS服务的,属于多余属性,并没把样式和元素绑定起来,一个CSS类选择器,文本框可以使用,下拉框也可以使用,甚至按钮也可以使用,这样其实非常混乱, 修改时就不方便,所以... -
JQUERY选择器 id选择器 2) $('.class') css选择器,class类名
2022-05-28 18:08:387) $('div>p') 与上一个层次选择器差不多,但是div下面有子元素,子元素下还有孙元素,该选择器只能选子元素 8) $('div+p') 该选择器用得很少表示div相邻下一个选择器,(必须是相同层次元素并且紧挨的) ...