精华内容
下载资源
问答
  • 层次选择器后代选择器后代选择器(E F)就是可以选择某元素的后代元素。例如E为祖先元素,F为后代元素,表达的意识就是选择E元素的所有后代F元素,这里的F元素不管是E元素的子元素、孙辈元素或者更深层次的关系,都将...

    层次选择器通过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元素

    展开全文
  • 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>
    

    在这里插入图片描述


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

    展开全文
  • body{font-size:12px;text-align:center;}div,span{float:left;border:solid 1 px #ccc;margin:8px;display:none}.clsFraA{width:65px;height:65px}.clsFraP{width:45px;height:45px;background-color:#eee}.clsFraC...

    body{font-size:12px;text-align:center;}

    div,span{float:left;border:solid 1 px #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}

    $(function () {

    $('#divMid').css('display', 'block');

    $('div span').css('display', 'block'); //显示div中所有的标记

    })

    $(function () {

    $('#divMid').css('display', 'block');

    $('div>span').css('display', 'block'); //显示

    中子 标记

    })

    $(function () {

    $('#divMid+div').css('display', 'block'); //显示ID为divMid元素后的下一个

    $('#divMid').next().css('display', 'block');

    })

    $(function () {

    $('#divMid ~ div').css('display', 'block'); //显示ID为divMid元素后的所有

    $('#divMid').nextAll().css('display', 'block');

    })

    $(function () {

    $('#divMid').siblings('div').css('display','block'); //显示ID为divMid元素的所有相邻

    })

    /* siblings()方法与选择器prev~siblings 区别在于,前者获取全部的相邻元素,不分前后,而后者仅获取标记后面全部相邻元素,不能获取前面部分*/

    Left

    Right_1

    Right_2

    展开全文
  • 五、CSS选择器选择器,就是用一种方式把我们想要的那一个标签选中。把它选中了,你才能操作这个标签的CSS样式。CSS中有很多把你所需要的标签选中的方式,这些不同的方式就是不同的...层次选择器在实际开发中也是相当...

    五、CSS选择器

    选择器,就是用一种方式把我们想要的那一个标签选中。把它选中了,你才能操作这个标签的CSS样式。

    CSS中有很多把你所需要的标签选中的方式,这些不同的方式就是不同的选择器。

    在2.CSS选择器-CSS基础中我们学习了以下几种选择器:

    元素选择器

    id选择器

    class选择器

    群组选择器

    这些都是CSS中最基本的选择器。

    层次选择器,就是通过元素之间的层次关系来选择元素。

    层次选择器在实际开发中也是相当重要的,常见的层次关系包括:父子、后代、兄弟和相邻。

    CSS层次选择器

    选择器

    说明

    M N

    后代选择器,选择M元素内部后代N元素(所有的N元素)

    M>N

    子代选择器,选择M元素内部子代N元素(所有第1级N元素)

    M~N

    兄弟选择器,选择M元素后所有的同级N元素。

    M+N

    相邻选择器,选择M元素相邻的下一个元素(M、N是同级元素)

    1.后代选择器

    后代选择器:选中元素内部中所有的指定的某个元素,包括子元素和其它后代元素。

    (1)语法格式

    M N{}

    ① 说明

    M元素和N元素之间用空格隔开,表示选中M元素内部所有N元素后代。

    (2)示例

    ① 例1

    CSS层次选择器

    /*后代选择器*/

    #first p{

    color:#FFC0CB;

    }

    子元素:人生若只如初见

    子元素的子元素:当时只道是寻常

    子元素:越努力,越幸运。

    2b88d7979879

    后代选择器示例11.png

    2.子代选择器

    子代选择器:选中元素内部的某一个子元素,只限子元素。

    和后代选择器很相似,但却有不同。

    (1)语法格式

    M>N{}

    ① 说明

    M元素和N元素之间用 > 隔开,表示选中M元素内部的子元素N。

    (2)子代选择器与后代选择器区别

    后代选择器,选取的是元素内部所有的元素,包括子元素。

    子代选择器,选取的是元素内部某一个元素,只限子元素。

    (3)示例

    ① 例1

    CSS层次选择器

    /*子代选择器*/

    #first>p{

    color:#FFC0CB;

    }

    子元素:人生若只如初见

    子元素的子元素:当时只道是寻常

    子元素:越努力,越幸运。

    2b88d7979879

    子代选择器示例1.png

    3.兄弟选择器

    兄弟选择器:选中元素后面(不包括前面)的某一类兄弟元素(同级)。

    (1)语法格式

    M~N{}

    ① 说明

    M元素和N元素之间用 ~ 隔开,表示选中 M 元素后面的所有某一类兄弟元素 N。

    (2)示例

    ① 例1

    CSS层次选择器

    /*兄弟选择器*/

    #second ~ p{

    color:greenyellow;

    }

    子元素:人生若只如初见

    子元素的子元素:当时只道是寻常

    子元素:越努力,越幸运。

    子元素:

    男儿何不带吴钩,收取关山五十州。

    请君暂上凌烟阁,若个书生万户侯?

    2b88d7979879

    兄弟选择器示例1.png

    4.相邻选择器

    相邻选择器:选中元素后面(不包括前面)的某一个相邻的兄弟元素(同级)。

    相邻选择器与兄弟选择器也很像。

    (1)语法格式

    M+N{}

    ① 说明

    M元素和N元素之间用 + 隔开,表示选中 M 元素后面某一个相邻的兄弟元素 N。

    (2)相邻选择器与兄弟选择器区别

    兄弟选择器,选中元素后面所有的某一类元素。

    相邻选择器,选中元素后面相邻的某一个元素。

    (3)示例

    ① 例1

    CSS层次选择器

    /*相邻选择器*/

    #second + p{

    color:greenyellow;

    }

    子元素:人生若只如初见

    子元素的子元素:当时只道是寻常

    子元素:越努力,越幸运。

    子元素:

    男儿何不带吴钩,收取关山五十州。

    请君暂上凌烟阁,若个书生万户侯?

    2b88d7979879

    相邻选择器示例1.png

    ② 例2

    CSS层次选择器

    *{

    padding: 0; /*去除所有元素的 padding和margin*/

    margin: 0;

    }

    ul{

    list-style-type:none; /*去除列表默认符号*/

    }

    /*相邻选择器*/

    li+li{

    border-top:2px solid #FFD700;

    }

    • 第 1 li元素
    • 第 2 li元素
    • 第 3 li元素
    • 第 4 li元素
    • 第 5 li元素

    2b88d7979879

    相邻选择器示例2.png

    (4)实际开发

    在两个列表项之间使用相邻选择器是一个非常棒的技巧,在实际开发中如果我们想要在两个元素之间实现什么效果(例如:border、 margin等),我们会经常用到这个技巧!

    一定要重点掌握。

    ① 例1

    CSS层次选择器

    *{

    padding: 0; /*去除所有元素的 padding和margin*/

    margin: 0;

    }

    ul{

    list-style-type:none;

    }

    li{

    float: left; /*去除列表默认符号*/

    }

    /*相邻选择器*/

    li+li{

    border-left:2px solid #FFD700;

    }

    • 第 1 li元素  
    • 第 2 li元素  
    • 第 3 li元素  
    • 第 4 li元素  
    • 第 5 li元素

    2b88d7979879

    相邻选择器示例3.png

    (5)关于CSS3

    到目前为止,我们已经学习了 8 种选择器,其实还有非常多重要的选择器,但大部分都是CSS3新增的。

    CSS3非常强大,能实现非常多很棒的效果,以后一定要去学习一下CSS3。

    展开全文
  • CSS3 层次选择器

    2021-06-11 02:52:13
    后代选择器(E F)后代选择器也被称做包含选择器,所起做用就是能够选择某元素的后代元素,好比说:E F,前面E为祖先元素,F为后代元素,所表达的意思就是选择了E元素的全部后代F元素,请注意他们之间须要一个空格...
  • HTML之层次选择器

    2021-05-16 17:44:15
    HTML之层次选择器 1.后代选择器 多层次, 所有后代 例如以下: 所有p都将受到影响 <style> body p{ background-color: #f9ff68; } </style> <body> <p>第一个p</p> <p>第二...
  • Jquery基本选择器层次选择器过滤选择器表单选择器使用示[html]Jquery示例《script》//等待dom元素加载完毕.$(document).ready(function () {$(".has_children").click(function () {$(this).addClass("highlight") /...
  • 本文实例讲述了jQuery层次选择器用法。分享给大家供大家参考,具体如下:/p>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2-5$(document).ready(function(){//选择 body内的所有div元素.$('#...
  • 另外还可以加入插件使其支持XPath选择器,甚至开发者可以编写属于自己的选择器(即选择器插件,参考上篇:jQuery插件原来如此简单——jQuery插件的机制及实战)。正是jQuery强大的选择器功能,让它很容易上手,吸引了...
  • 1.引言说到选择器,大家可能会想到层叠样式表。在css中,选择器可以获取元素,为其添加css样式;...2.层次选择器详解层次选择器是通过DOM元素之间的层次关系来获取元素的。zepto层次选择器与css的相同之处...
  • 如果想通过DOM元素之间的层次关系来获取特定元素,例如后代元素、子元素、相邻元素、兄弟元素等,则需要使用层次选择器。 后代选择器(("ancestordescendant"))返回值集合元素;在给定祖先元素下匹配所有的后代...
  • 层次选择器

    2021-05-01 01:02:21
    层次选择器 1.后代选择器 选择器 相邻选择器 通用选择器 后代选择器 我们在页面body中 输入 <body> <p id="cla">p1</p> <p>p2</p> <p>p3</p> <p>p4</p> ...
  • 本文实例讲述了jQuery选择器之层次选择器用法。分享给大家供大家参考,具体如下:前面一篇介绍了几种基本的jQuery选择器,今天归纳一下jQuery的层次选择器。DOM元素之间的层次关系主要包括元素的子元素、后代元素、...
  • 本文实例讲述了JQuery中层次选择器用法。分享给大家供大家参考。具体如下:/p>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">层次选择器$(function () {//------1.在给定的祖先元素下匹配所有...
  • ​三.高级选择器在前面学习六种最常规的选择器,一般来说通过这六种选择器基本上可以解决所有 DOM 节点对象选择的问题。但在很多特殊的元素上,比如父子关系的元素,...层次选择器​:在层次选择器中,除了后代选择...
  • jQuery 层次选择器

    2021-05-21 14:09:30
    jQuery 层次选择器 jQuery 层次选择器 (0)测试前的准备工作 A. 定义测试对象 B. 定义测试对象的 CSS 样式 C. 再定义一些测试用的 button。 (1)所有后代选择器(A B) 所有后代,包括其直接后代及间接后代。 (2)...
  • 层次选择器 <head> <meta charset="UTF-8"> <title>Title</title> <style> /*后代选择器*/ body p{ color:red; } /*子选择器 一代 儿子*/ body>p{ background: #ff5777;...
  • CSS层次选择器

    2021-01-20 22:42:11
    层次选择器 后代选择器:在某个元素的后面 /* 后代选择器 */ body p{ background-color: gray; } 子选择器 一代 儿子 /*子选择器*/ body>p{ background-color: red; } 相邻兄弟选择器 只有一个相邻 ...
  • 【CSS】层次选择器

    2021-01-05 12:47:26
    后代选择器 在某个元素的后面:祖爷爷 爷爷 爸爸 你 body p{ background: red; } 子选择器 只有一代,儿子 body>p { background: red; } 相邻兄弟选择器 弟弟选择器,选择兄弟下面一个元素 .active+p { ...
  • 层次选择器: 后代:M N{ }; 父子:M>N{ }; 兄弟:M ~N{ };表示M元素后所有同级的N元素都选择。 相邻:M+N;表示M元素后紧挨着的N元素,是单个的。 属性选择器: M[attr] {}; M[attr=value] {};=表示属性值...
  • 层次选择器字面意思:通过DOM元素之间的结构(层次关系)来获取特定元素,例如后代元素、子元素、相邻元素、兄弟元素等。 分享几个常见的层次选择器: >(大于号)紧跟父子关系 如$("div > p")表示选择div下的...
  • 一、通配符选择器通配符选择器常用 ‘*’ 号表示,它是所有选择器里作用范围最广的,能匹配页面中所有的元素。基本语法格式:*{ 属性1:属性值1;属性2:属性值2;}例子使用该选择器定义样式,清除所有HTML标记的...
  • 四种CSS的导入方式 1.4、CSS的3种导入方式 三种基本选择器(重要) 层次选择器
  • 在学习这几个选择器的路上,大家光是听名字也可以听出来,这里存在着父类、子类、兄弟的概念,所以在理解上一定要有“先后顺序”的概念,就比如下面的这段代码是我后面即将测试的用例基础码,分析一下它的层次顺序:...
  • 选择器的分类整理

    2021-10-12 18:30:33
    关于选择器大概可以分为以下几类:标签选择器、类选择器、ID选择器、普遍选择器、层次选择器、多选择器、属性选择器、伪类选择器、伪元素选择器 。具体如下: 标签选择器 标签选择器又叫元素选择器,换句话说,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 306,921
精华内容 122,768
关键字:

属于层次选择器的是