层次选择器包括

css-层次选择器

2019-08-08 16:37:04

层次选择器包括 子元素选择器后代选择器下一个兄弟选择器（+*）之后所有兄弟选择器（~*）通过一个简单的练习来认识并运用层次选择器代码解析如下： 1、内容  <body> <!-- 导航...

层次选择器包括

子元素选择器
后代选择器
下一个兄弟选择器（+*）
之后所有兄弟选择器（~*）

通过一个简单的练习来认识并运用层次选择器

代码解析如下：

1、内容
<!-- 内容区 -->
<body>
<!-- 导航 -->
	<div class="nav">
	<ul>
	<!-- 一级导航 -->
		<li>
			<p>JaveEE</p>
			<!-- 二级导航 -->
			<ul>
				<li>CoreJava</li>
				<li>Linxu</li>
				<li>XML</li>
				<li>Oracle</li>
			</ul>
		</li>
		<!-- 一级导航 -->
		<li>
			<p>WebUI</p>
			<!-- 二级导航 -->
			<ul>
				<li>Html</li>
				<li>CSS</li>
				<li>Javascript</li>
			</ul>
		</li>
		<!-- 一级导航 -->
		<li>
			<p>IOT</p>
		</li>
	</ul>
	</div>
	<!-- 导航结束 -->
	
</body>

2、通过添加css样式
<style>
		/*重置样式*/
		body,ul,p{
			margin: 0;
		}
		ul{
			padding: 0;
			list-style: none;
		}
		/*导航部分*/
		.nav{
			background: #333;
			color: #ededed;
		}
		/*清除浮动*/
		.nav>ul::after{
			content: "";
			display: block;
			clear: both;
		}
		.nav li{
			line-height: 3em;
		}
		/*设置浮动*/
		.nav>ul>li{
			float: left;
			width: 100px;
			text-align: center;
			position: relative;

		}
		.nav>ul>li:hover{
			background-color: #ededed;
			color: #333;
			
		}
		/*二级导航容器*/
		.nav>ul>li>ul{
			display: none;
			position: absolute;
			background-color: #ededed;
			color: #333;
			width: 100%;
		}
		
		.nav>ul>li:hover >ul {
			display: block;

		}
	</style>

收起

展开全文

css练习

html 层次选择器,CSS选择器（2）——层次选择器

2021-06-11 01:31:03

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

层次选择器通过HTML的DOM元素间的层次关系获取元素，其主要层次关系包括后代、父子、相邻兄弟和通用兄弟几种关系，通过其中某类关系可以方便快捷地选定需要的元素。
层次选择器
后代选择器
后代选择器(E F)就是可以选择某元素的后代元素。例如E为祖先元素，F为后代元素，表达的意识就是选择E元素的所有后代F元素，这里的F元素不管是E元素的子元素、孙辈元素或者更深层次的关系，都将被选中。
ul em {color:red; font-weight:bold;}
List item 1List item 1-1
List item 1-2
List item 1-3List 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 层次选择器siblings与nextAll的区别介绍
2020-10-27 01:25:28
jquery 层次选择器包括siblings与nextAll，本文为大家介绍下具体的使用方法，想学习的朋也可以参考下，希望对大家有所帮助
收起
jQuery选择器之层次选择器用法实例分析
2020-12-29 18:57:50
本文实例讲述了jQuery选择器之层次选择器用法。分享给大家供大家参考，具体如下：前面一篇介绍了几种基本的jQuery选择器，今天归纳一下jQuery的层次选择器。DOM元素之间的层次关系主要包括元素的子元素、后代元素、...
收起
jQuery层次选择器选择元素使用介绍
2020-12-09 19:04:36
层次选择器：通过DOM元素间的层次关系获取元素，其主要的层次关系包括后代、父子、相邻、兄弟关系，通过其中基类关系可以方便快捷地定位元素 jQuery选择器详解根据所获取页面中元素的不同，可以将jQuery选择器分为...
收起

jQuery选择器之层次选择器

2015-05-30 21:04:00

层次选择器通过 DOM 元素间的层次关系获取元素，其主要的层次关系包括后代、父子、相邻、兄弟关系，通过其中某类关系可以方便快捷地定位元素，其详细说明如表所示：示例代码： <head> <title> ...

本文接上篇聊聊层次选择器。
 
二.层次选择器
层次选择器通过 DOM 元素间的层次关系获取元素，其主要的层次关系包括后代、父子、相邻、兄弟关系，通过其中某类关系可以方便快捷地定位元素，其详细说明如表所示：

 示例代码：

<head>
    <title> 使用 jQuery 层次选择器 </title>
    <script language="javascript" type="text/javascript" src="Jscript/jquery-1.8.2.min.js"></script>
    <style type="text/css">
        body {
            font-size: 12px;
            text-align: center
        }

        div,
        span {
            float: left;
            border: solid 1px #ccc;
            margin: 8px;
            display: none
        }

        .clsFraA {
            width: 65px;
            height: 65px
        }

        .clsFraP {
            width: 45px;
            height: 45px;
            background-color: #eee
        }

        .clsFraC {
            width: 25px;
            height: 25px;
            background-color: #ddd
        }
    </style>
    <script type="text/javascript">
        $(function () { // 匹配后代元素
            $("#divMid").css("display", "block");
            $("div span").css("display", "block");
        })
        $(function () { // 匹配子元素
            $("#divMid").css("display", "block");
            $("div>span").css("display", "block");
        })
        $(function () { // 匹配后面元素
            $("#divMid + div").css("display", "block");
            $("#divMid").next().css("display", "block");
        }) * /
        $(function () { // 匹配所有后面元素
            $("#divMid ~ div").css("display", "block");
            $("#divMid").nextAll().css("display", "block");
        })
        $(function () { // 匹配所有相邻元素
            $("#divMid").siblings("div").css("display", "block");
        })
    </script>
</head>

<body>
    <div class="clsFraA">Left</div>
    <div class="clsFraA" id="divMid">
        <span class="clsFraP" id="Span1">
            <span class="clsFraC" id="Span2"></span>
        </span>
    </div>
    <div class="clsFraA">Right_1</div>
    <div class="clsFraA">Right_2</div>
</body>


 
 
 好了，本篇文章就介绍到这儿，欢迎大家留言交流；喜欢或有帮助到您的话，点个赞或推荐支持一下！
 
转载于:https://www.cnblogs.com/johnvwan/p/9581751.html

收起

展开全文

jQuery选择器——层次选择器

2017-07-30 18:29:30

前一章介绍了几种基本的jQuery选择器，今天归纳一下jQuery的层次选择器。DOM元素之间的层次关系主要包括元素的子元素、后代元素、相邻元素和兄弟元素等，我们可以通过DOM元素之间的层次关系来获取想要的元素。

前一章介绍了几种基本的jQuery选择器，今天归纳一下jQuery的层次选择器。DOM元素之间的层次关系主要包括元素的子元素、后代元素、相邻元素和兄弟元素等，我们可以通过DOM元素之间的层次关系来获取想要的元素。为了更好的学习，我们先列出一段HTML代码：



<body>
    <div id="one" class="aaa">
        id=one，class=aaa的div
        <br />
        <div class="mini">class=mini</div>
    </div>
    <div id="two" class="aaa">
        id=two，class=aaa的div
        <br />
        <div class="mini">class=mini的div</div>
        <div class="mini">class=mini的div</div>
    </div>
    <div class="bbb">
        class=bbb的div
        <div class="mini">class=mini的div</div>
        <div class="mini">class=mini的div</div>
    </div>
    <span>^^span元素^^</span>
    <span>--span元素--</span>
</body>



1、后代元素选择器

选择器：ancestor descendant 

描述：在给定的祖先元素下匹配所有的后代元素。 

返回值：元素集合 

示例：



<script type="text/javascript">
    $(document).ready(function(){
        $("body div").css("background","#ffbbaa");
    });
</script>



2、子元素选择器

选择器：parent > child 

描述：在给定的祖先元素下匹配所有的子元素。 

返回值：元素集合 

示例：



<script type="text/javascript">
    $(document).ready(function(){
        $("body > div").css("background","#ffbbaa");
        $("body > div.aaa").css("background", "#ffbbaa");
    });
</script>



3、相邻元素选择器

选择器：prev + next 

描述：匹配所有紧接在 prev 元素后的 next 元素（prev和next必须是相邻的兄弟关系）。 

返回值：元素集合 

示例：

<script type="text/javascript">
    $(document).ready(function(){
        //【写法1】写法1与写法2等价
        $("#one + span").css("background","#ffbbaa");
        //【写法2】
        $("#one").next("span").css("background","#ffbbaa");
        //【写法3】写法3、写法4与写法5等价
        $("#one").nextAll("span:first").css("background","#ffbbaa");
        //【写法4】
        $("#one").nextAll("span:eq(0)").css("background","#ffbbaa");
        //【写法5】
        $("#one").nextAll("span").eq(0).css("background","#ffbbaa");
    });
</script>

当#one元素之后存在兄弟span元素，但span元素均与#one元素不相邻时，写法3、写法4和写法5可以查询到结果，写法1和写法2查询不到结果。 

当#one元素之后存在相邻的兄弟span元素时，写法1、写法2、写法3、写法4和写法5查询到的结果相同。

4、兄弟元素选择器

选择器：prev ~ siblings 

描述：匹配 prev 元素之后的所有siblings兄弟元素。 

返回值：元素集合 

示例：



<script type="text/javascript">
    $(document).ready(function(){
        //【写法1】写法1与写法2等价
        $("#two ~ div").css("border","1px solid #ffbbaa");
        $(".mini:eq(1) ~ div").css("border","1px solid #ffbbaa");
        //【写法2】
        $("#two").nextAll("div").css("border","1px solid #ffbbaa");
        $(".mini:eq(1)").nextAll("div").css("border","1px solid #ffbbaa");
    });
</script>

5、prev()和prevAll()

筛选方法：prev() 

描述：取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。 

返回值：元素集合 

示例：

<script type="text/javascript">
    $(document).ready(function(){
        //【写法1】
        $("span:first").prev(".bbb").css("background", "#ffbbaa");
        //【写法2】写法2、写法3和写法4等价
        $("span:first).prevAll(".bbb:first").css("background", "#ffbbaa");
        //【写法3】
        $("span:first).prevAll(".bbb:eq(0)").css("background", "#ffbbaa");
        //【写法4】
        $("span:first).prevAll(".bbb").eq(0).css("background", "#ffbbaa");
    });
</script>

当span:first元素之前存在兄弟.bbb元素，但.bbb元素均与span:first元素不相邻时，写法2、写法3和写法4可以查询到结果，写法1查询不到结果。 

当span:first元素之前存在相邻的兄弟.bbb元素时，写法1、写法2、写法3和写法4查询到的结果相同。

筛选方法：prevAll() 

描述：查找当前元素之前所有的同辈元素。 

返回值：元素集合 

示例：

<script type="text/javascript">
    $(document).ready(function(){
        $("#two").prevAll("div").css("background", "#ffbbaa");
    });
</script>

收起

展开全文

jquery html

jQuery 层次选择器
2021-05-21 14:09:30
jQuery 层次选择器 jQuery 层次选择器 （0）测试前的准备工作 A. 定义测试对象 B. 定义测试对象的 CSS 样式 C. 再定义一些测试用的 button。（1）所有后代选择器(A B) 所有后代，包括其直接后代及间接后代。（2）...
收起
java css 软件测试
层次选择器
2014-10-10 16:15:00
层次选择器通过DOM元素间的层次关系获取元素，其主要的层次关系主要包括后代、父子、相邻、兄弟关系，通过其中某类关系可以方便快捷地定位元素，其详细说明如表2-3所示。选择器功能返回值 ...
收起
表单选择器，层次选择器
2020-09-27 20:09:44
昨天上的第一堂课，老师说，主要包括类选择器，昨天下午听的时候感觉很简单，但是自己要是做起来，就不是那么容易了，一开始写的时候，括号里面，引用class的时候前面要有个“.”，引用id的时候前面要用“#”，后面...
收起
jquery js
css3选择器--层次选择器
千次阅读 2017-06-01 16:29:37
层次选择器：通过html的dom元素间的层次关系获取元素，主要层次关系有后代、父子、相邻兄弟和通用兄弟。 1. 后代选择器： E F，作用的是选择元素的后代元素。包括子元素、孙辈元素等。（常用） div div{ color...
收起
jquery层次选择器的介绍
2021-01-21 13:26:27
jquery层次选择器，包括空格、>、next、+、nextAll、~、siblings、prev()、prevAll()等函数或表达式。 1、空格表示获取所有子孙后代元素 2、 >表示获取一级子元素 3、next函数获取紧接在之后的同辈元素列表 4、...
收起
jquery选择器之层次选择器
2013-11-20 14:11:24
层次选择器中包括： 1、ancestor descendant 使用"form input"的形式选中form中的所有input元素.即ancestor(祖先)为from, descendant(子孙)为input. 例：$("bgRed div") 选择css类为bgRed的元素中的搜有元素。 2...
收起
jquery
jQuery层次选择器
2017-08-31 21:24:12
本文主要通过实例介绍了jQuery提供的几种元素选择器的用法，包括：后代选择器、子代选择器、相邻选择器、兄弟选择器。
收起
使用jQuery层次选择器选择元素
2013-04-18 08:14:43
1.层次选择器：通过DOM元素间的层次关系获取元素，其主要的层次关系包括后代、父子、相邻、兄弟关系，通过其中基类关系可以方便快捷地定位元素 jQuery选择器详解根据所获取页面中元素的不同，可以将jQuery选择...
收起
jQuery
JQuery层次选择器
2018-08-18 16:53:11
后代元素选择器（后代所有，包括孙子关系）相邻元素选择器（紧邻元素的下一个元素）兄弟元素选择器（所有与元素同级的）示例：运用这四个选择器 <!DOCTYPE html> <html lang="en&...
收起
jQuery -常用选择：基础选择器、层次选择器、基本过滤选择器、内容过滤选择器、可见性过滤选择器、属性选择...
2020-10-08 18:34:27
1.2 层次选择器 $(body div) $(body > div) 仅包括body 子一层的div $(.one + div ) + 所有class为one的元素的下一个兄弟元素 $(.one ~ div) ~ 所有class为one 的元素的后面所有的兄弟元素 1.3 基本过滤选择...
收起
jquery
JQuery-层次选择器的使用
2021-06-02 15:53:17
在jQuery中，层次选择器共有4种，如下表所示。 jQuery层次选择器 M N 后代选择器，选择M元素内部后代N元素（所有N元素） M > N 子代选择器，选择M元素内部子代N元素（所有第1级N元素） M ~ N 兄弟选择...
收起
jquery
jquery层次选择器
2013-03-31 21:42:37
//2层次选择器 $(document).ready(function(){ //后代元素选择器（儿子孙子） $("#div1 ul li").css({"color":"blue","fontSize":"30px"});//ul,li起作用,写2个样式用{} //子元素选择器（只包括儿子）...
收起
jQuery 之层次选择器
2013-11-14 16:07:33
[size=small][color=olive][b]1.2：层次选择器：说明：层次选择器通过DOM元素的层次关系获得元素，其主要的层次关系包括后代、父子、相邻、兄弟关系，通过其中的关系可以快速定位元素： ancetor ...
收起
jquery java
CSS层次选择器温故-2
2017-12-26 09:54:00
1.层次选择器通过HTML的DOM元素间的层次关系获取元素，层次关系包括后代、父子、相邻兄弟和通用兄弟，通过其中某类关系可以方便快捷地选定需要的元素 2.语法 3.兼容性 IE7以及以上版本 4.后代选择器也称...
收起
Jquery层次选择器
2016-10-18 14:14:16
$("body >div") body里的直接子元素（不包括孙子元素） $("#one +div") id为one的下一个div，临近的兄弟元素 $("#one ~div") id为one的后面所有的div 后面所有的兄弟元素 $("#one").sibings("div") id...
收起
CSS3学习笔记之 层次选择器
2014-08-31 23:54:26
层次选择器通过HTML的DOM元素之间的层次关系获取元素，其主要的层次关系包括后代，父子，相邻兄弟和通用兄弟几种关系，通过其中某类关系可以方便快捷地选定需要的元素。层次选择器语法如下：选择器类型 ...
收起
css3

css-层次选择器

html 层次选择器,CSS选择器（2）——层次选择器

This is

This is

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

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

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

jQuery选择器之层次选择器

二.层次选择器

jQuery选择器——层次选择器

1、后代元素选择器

2、子元素选择器

3、相邻元素选择器

4、兄弟元素选择器

5、prev()和prevAll()

jQuery 层次选择器