精华内容
下载资源
问答
  • 层次选择器的作用
    千次阅读
    2022-02-07 11:54:25

    1.后代选择器

    后代选择器是包含了后面的所有的标签如:

    /*后代选择器 该选择器代表ul标签后面的全部li标签无关层级*/
    ul li{
        background-color: rgb(8,84,5);
    }

    2.子选择器

    子选择器表示后面一层的选择如;

    /*子选择器 该选择器表示ul标签后面的p标签只有一层*/
    ul > p{
    	background-color: yellow;
    }

    3.相邻选择器

    使用id选择器或者class选择器定位到标签下面的相邻标签如:

    /*相邻选择器 相邻向下的一个标签*/
    .Tang + b{
    	background-color: red;
    }

    4.相邻选择器进阶版

    与相邻选择器相同表示可以定位到class选择器或者id选择器标签下面的全部的相同标签,如:

    /*全部选择选择器 表示在.Tang标签的下面所以b标签*/
    .Tang~b{
    	background-color: #111111;
    }

    更多相关内容
  • CSS|层次选择器

    千次阅读 2021-07-25 19:26:30
    CSS|层次选择器 1.分类 层次选择器分为四种类型: 后代选择器 子选择器 相邻兄弟选择器 通用选择器 我们先构建一个网页: body内放5个段落,第五个段落中放一个无序列表: <!DOCTYPE html> <...

    CSS|层次选择器


    1.分类

    层次选择器分为四种类型:

    • 后代选择器
    • 子选择器
    • 相邻兄弟选择器
    • 通用选择器

    我们先构建一个网页:

    body内放5个段落,第五个段落中放一个无序列表:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>层次选择器</title>
    </head>
    <body>
    
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <p>p4</p>
    <p>
      水果:
      <ul>
      <li>西瓜</li>
      <li>苹果</li>
      <li>香蕉</li>
    </ul>
    </p>
    
    </body>
    </html>
    

    在这里插入图片描述

    我们可以很容易的想到:

    • p1-p4一级水果:都是body的儿子
    • 西瓜、苹果、香蕉是水果:的后代

    2.后代选择器

    从上面可以看出所有的标签都是body的后代,那么我们使用后代选择器,就可以将body的后代(所有标签)改变样式:

    后代选择器 是用祖先加上空格再加上后代标签类型进行声明的:

    body p{
        background-color: aqua;
    }
    

    如上,就是将body的所有的后代p标签全部变为aqua色:

    在这里插入图片描述

    3.子选择器

    子选择器可后代选择器相比,就是把空格变成>

    body>p{
        background-color: aqua;
    }
    

    子选择只会把body子代的p标签背景变成aqua色:

    在这里插入图片描述

    4.相邻兄弟选择器

    相比后代选择器,将空格变为+,将前标签改为类:

    .style1+p{
        background-color: aqua;
    }
    

    这个就是将引用了style1这个类的标签的下一个兄弟(相同级别的)p标签背景改为aqua色:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>层次选择器</title>
        <link rel="stylesheet" href="Style-demo06.css">
    </head>
    <body>
    
    <p>p1</p>
    <p class="style1">p2</p>
    <p>p3</p>
    <p>p4</p>
    <p>
      水果:
      <ul>
      <li><p>香蕉</p></li>
      <li><p>苹果</p></li>
      <li><p>香蕉</p></li>
    </ul>
    </p>
    
    </body>
    </html>
    

    p2引用了,那么就应该是p3变色:

    在这里插入图片描述

    5.通用选择器

    相比于相邻兄弟选择器,将+改为~:

    .style1~p{
        background-color: aqua;
    }
    

    它的功能是将后续所有的兄弟(相同等级的)p标签背景全部改为aqua色:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>层次选择器</title>
        <link rel="stylesheet" href="Style-demo06.css">
    </head>
    <body>
    
    <p>p1</p>
    <p class="style1">p2</p>
    <p>p3</p>
    <p>p4</p>
    <p>
      水果:
      <ul>
      <li><p>香蕉</p></li>
      <li><p>苹果</p></li>
      <li><p>香蕉</p></li>
    </ul>
    </p>
    
    </body>
    </html>
    

    在这里插入图片描述


    人生没有白走的路,每一步都算数!

    展开全文
  • CSS 四种层次选择器

    千次阅读 2020-12-14 14:16:00
    实例结构图 后代选择器 格式:元素 标签{} 特点 作用域为元素所有子代标签 实例 <!DOCTYPE html>...层次选择器</title> <style> body p{ background: red; } </sty

    实例结构图

    在这里插入图片描述

    后代选择器

    格式:元素 标签{}

    特点

    1. 作用域为元素所有子代标签
    实例
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>层次选择器</title>
        <style>
           body p{
              background: red;
           }
        </style>
    </head>
    <body>
    <p>h1</p>
    <p>h2</p>
    <p>h3</p>
    <ul>
        <li><p>h4</p></li>
        <li><p>h5</p></li>
    </ul>
    <p>h6</p>
    </body>
    </html>
    

    在这里插入图片描述

    子选择器

    格式:元素>标签{}

    特点

    1. 作用域为元素下一子代标签
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>层次选择器</title>
        <style>
           body>p{
              background: red;
           }
        </style>
    </head>
    <body>
    <p>h1</p>
    <p>h2</p>
    <p>h3</p>
    <ul>
        <li><p>h4</p></li>
        <li><p>h5</p></li>
    </ul>
    <p>h6</p>
    </body>
    </html>
    

    在这里插入图片描述

    相邻兄弟选择器

    格式:选中元素+标签{}

    特点

    1. 作用域为同层相邻且仅下一个标签

    实例

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>层次选择器</title>
        <style>
           .active+p{
              background: red;
           }
        </style>
    </head>
    <body>
    <p>h1</p>
    <p class="active">h2</p>
    <p>h3</p>
    <ul>
        <li><p>h4</p></li>
        <li><p>h5</p></li>
    </ul>
    <p>h6</p>
    </body>
    </html>
    

    在这里插入图片描述

    通用选择器

    格式:选中元素~标签{}

    特点

    1. 作用域为同层且下面所有标签

    实例

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>层次选择器</title>
        <style>
           .active~p{
              background: red;
           }
        </style>
    </head>
    <body>
    <p>h1</p>
    <p class="active">h2</p>
    <p>h3</p>
    <ul>
        <li><p>h4</p></li>
        <li><p>h5</p></li>
    </ul>
    <p>h6</p>
    </body>
    </html>
    

    在这里插入图片描述

    展开全文
  • 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选择器详细介绍:基本选择器,层次选择器,属性选择器
  • 层次选择器的4种选择器列表

    千次阅读 2019-06-21 09:16:52
    选择器 描述 返回 示例 $("ancestor descendant") 选取ancestor元素里的所有descendant(后代)元素 集合元素span $("div span")选取<div>里的所有的<span>元素 $("parent > ...
  • 选择器 说明 M N 后代选择器,选择M元素内部后代的N元素(所有N元素) M>N 子代选择器,选择M元素内部子代的N元素(所有第1级N元素) M~N 兄弟选择器,选择M元素后所有的统计N元素 M+N 相邻选择器,...
  • 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')只...
  • jQuery层次选择器

    千次阅读 2018-07-28 12:13:51
    层次选择器 通过DOM元素之间的结构(层次关系)来获取特定元素,例如后代元素、子元素、相邻元素、兄弟元素等。 层次选择器 选择器 描述 返回 示例 $("ancestor descendant") 选取...
  • 一直以来,认为jquery在选择器上多此一举,既然有了id选择器,那么为什么还要费劲去搞各种其它选择器,id选择器难道不是万能的吗,难道不是最简单的吗?说到最简单,有可能是当之无愧,但是要说万能,确实名不副实;...
  • css3选择器--层次选择器

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

    千次阅读 2018-10-23 14:38:37
    1.后代选择器 选中parent元素内部后代所有 n 元素。 parent n{} 2.子代选择器 选中 parent 元素内部 的子元素 n parent&gt;n{} 3.兄弟选择器 选中 brother 元素后面的所有某一类兄弟元素 n。 brother~n{} 4....
  • 层级选择器(基础)+基本选择器

    千次阅读 2020-10-17 17:33:28
    ancestor descendant 后代选择器 :在给定的祖先元素下匹配所有的后代元素 语法:$("ancestor descendant") ancestor是祖辈或者父辈的标签或者属性,descendant是后代的标签或者属性
  • 而class属性本身没有语义,它纯粹是用来为CSS服务的,属于多余属性,并没把样式和元素绑定起来,一个CSS类选择器,文本框可以使用,下拉框也可以使用,甚至按钮也可以使用,这样其实非常混乱, 修改时就不方便,所以...
  • 01 层次选择器 a. 后代选择器 格式: E F { 声明;} 应用:获取E元素下所有与F匹配的元素 b. 子选择器 格式:E>F{声明;} 应用:只获取E下面的与F匹配的第一层子元素 c.相邻兄弟选择器 格式:E+F{声明;} ...
  • jQuery 层次选择器,属性选择器

    千次阅读 2016-12-01 10:40:25
    jQuery层次选择器 jquery属性选择器 jq根据是否有某属性选择 jq选取子元素、后边的元素等 $("div >span") $("#one +div") $("#one~div")
  • 一、Jquery常用的过滤选择器如下所示:  1、:first,选取第一个元素,比如$("div:first")选取第一个div元素  2、:last,选取最后一个元素,比如$("div:last")选取最后一个div元素  3、:not(选择器),...
  • 层次选择器 function f1 () { //派生选择器(父子关系)--不考虑层次 //$('div span').css('color','red'); //直接子元素选择器(父子关系)--考虑层次 //$('div >span').css('background-color','...
  • 提示:我们可以从jquery文档上学习哦~ 下面简单的介绍几种常用的选择器 ===================================基本选择器================================== id选择器 #id --> 匹配指定id名称 元素选择器 --...
  • 复合选择器是通过基本选择器进行组合后构成的,常用的复合选择器有:交集选择器、并集选择器、后代选择器、子元素选择器、相邻兄弟选择器和属性选择器等。 1. 交集选择器 交集选择器由两个选择器直接构成,其中...
  • 深度选择器 /deep/不起作用
  • CSS后代选择器

    千次阅读 2017-12-02 14:54:30
    关系选择器 ...于是,关系选择器就包括后代选择器、子选择器、相邻同胞选择器、同胞选择器。 表 2-2 关系选择器 选择器 语法 功能描述 版本 后代选择器 E F 选择E元素的所有后代F元素 1
  • CSS选择器

    千次阅读 多人点赞 2019-11-10 14:33:03
    层次选择器 伪类选择器 伪元素选择器 属性选择器 【基础选择器】 元素选择器(选择元素名) \ 如:p{color:red;} ID选择器(#号+ID名)\ 如:#csdn{color:black;} 类选择器(.+class名) \ 如...
  • jQuery选择器大全总结

    千次阅读 2021-08-11 16:42:30
    jQuery选择器jQuery的选择器基本选择器基本过滤选择器属性过滤选择器表单选择器子元素选择器操作元素属性操作样式操作样式类获取或设置元素高度和宽度操作HTML代码操作text代码 jQuery的选择器 基本选择器 id选择器...
  • jQuery选择器 1. JS中选择DOM元素的方法 考虑兼容性的话,js里面提供的选择DOM的方法只有两个: JavaScript选择元素的方法 document.getElementById(); 通过id属性获取指定...
  • 通配符选择器常用 ‘*’ 号表示,它是所有选择器作用范围最广的,能匹配页面中所有的元素。 基本语法格式:*{ 属性1:属性值1;属性2:属性值2;} 例子 使用该选择器定义样式,清除所有HTML标记的默认边距。 *{ ...
  • css高级选择器和基本选择器

    千次阅读 多人点赞 2019-07-05 16:11:22
    1.层次选择器 *相邻兄弟选择器,只对后面的兄弟有作用,对前面的兄弟没效果。 *相邻兄弟选择器,E+F E不会产生效果效果 2.结构伪类选择器 使用E F:nth-child(n)和E F:nth-of-type(n)的 关键点 E F:nth-...
  • JavaScript基础之层级选择器

    千次阅读 2017-09-18 16:46:50
    除了基本的选择器外,JQuery的层级选择器更加灵活,也更强大。 因为DOM的结构就是层级结构,所以我们经常要根据层级关系进行选择。层级选择器(Descendant Selector)如果两个DOM元素具有层级关系,就可以用$(...
  • 后代选择器与子元素选择器的区别

    千次阅读 2018-08-27 15:25:24
    1.后代选择器用空格作为连接符号 2.子元素选择器用&gt;作为连接符号 2.选中标签范围 1.后代选择器会选中指定标签中,所有的特定后代标签,也就是会选中儿子,孙子,只有放到标签中的特定标签都能选中 2.子...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 325,115
精华内容 130,046
关键字:

层次选择器的作用