精华内容
下载资源
问答
  • CSS层次选择器

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

    层次选择器

    • 后代选择器:在某个元素的后面

      /*  后代选择器
      */
         body p{
             background-color: gray;
         }
      
    • 子选择器 一代 儿子

      /*子选择器*/
      body>p{
          background-color: red;
      }
      
    • 相邻兄弟选择器 只有一个相邻 向下

      /*相邻兄弟选择器 */
       .c+ p{
           background-color: aqua;
       }
      
    • 通用兄弟选择器 当前选中元素的向下的所有兄弟元素

      /*通用兄弟选择器 */
       .c~p{
           background-color: chartreuse;
       }
      
    • 层次选择器案例

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>层次选择器</title>
      </head>
      <style>
      <!--    -->
      /*    p{*/
      /*        background-color: red;*/
      /*    }*/
      
      /*  后代选择器
      */
         /*body p{*/
         /*    background-color: gray;*/
         /*}*/
      
      /*子选择器*/
      
      /*body>p{*/
      /*    background-color: red;*/
      /*}*/
      
      /*相邻兄弟选择器   只有一个相邻 向下*/
      /* .c+ p{*/
      /*     background-color: aqua;*/
      /* }*/
      /*通用兄弟选择器 当前选中元素的向下的所有兄弟元素*/
       .c~p{
           background-color: chartreuse;
       }
      </style>
      <body>
      
      <p>p1</p>
      <p class="c">p2</p>
      <p>p3</p>
       <ul>
          <li><p>p4</p></li>
          <li><p>p5</p></li>
          <li><p>p6</p></li>
       </ul>
      <p>p7</p>
      <p>p8</p>
      <p>p9</p>
      </body>
      </html>
      
    展开全文
  • css层次选择器

    2021-01-15 11:13:50
    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接:...添加链接描述 懒得写代码了,就当是自己的笔记了 ...

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
    本文链接:https://blog.csdn.net/mu_mu_mu_mu_mu/article/details/106575214
    戳我跳转

    懒得写代码了,就当是笔记了

    展开全文
  • Java-CSS层次选择器

    2019-06-17 21:29:36
    层次选择器 后代选择器 选择器:E F(两个选择器之间必须要以空格隔开) 功能:选择匹配的F元素,且匹配的F元素被包含在匹配的E元素内 <p>1</p> <p>2</p> <p>3</p> <...

    层次选择器

    后代选择器

    选择器:E F(两个选择器之间必须要以空格隔开)
    功能:选择匹配的F元素,且匹配的F元素被包含在匹配的E元素内

    <p>1</p>
    <p>2</p>
    <p>3</p>
    <ul>
        <p>4</p>
        <p>5</p>
        <p>6</p>
    </ul>
    
    /*匹配body元素下的所有p元素*/
     body p{
          background: crimson;
          }
    

    效果图
    在这里插入图片描述

    子选择器

    选择器:E>F
    功能:选择匹配的F元素,且匹配的F元素是匹配的E元素的子元素

    <p>1</p>
    <p>2</p>
    <p>3</p>
    <ul>
        <p>4</p>
        <p>5</p>
        <p>6</p>
    </ul>
    
    /*匹配body元素下的子元素p元素*/
    body>p{
          background: aqua;
          }
    

    效果图
    在这里插入图片描述

    相邻兄弟选择器

    选择器:E+F
    功能:选择匹配的F元素,且匹配的F元素紧位于匹配的E元素后面

    <p class="class">1</p>
    <p>2</p>
    <p>3</p>
    <ul>
        <p>4</li></p>
        <p>5</li></p>
        <p>6</li></p>
    </ul>
    
    /*匹配紧位于指定元素后面的p元素*/
     .class+p{
          background: blue;
             }
    

    效果图
    在这里插入图片描述

    通用兄弟选择器

    选择器:E~F
    功能:选择匹配的F元素,且位于匹配的E元素后的所有匹配的F元素

    <p class="class">1</p>
    <p>2</p>
    <p>3</p>
    <ul>
        <p>4</li></p>
        <p>5</li></p>
        <p>6</li></p>
    </ul>
    
    /*匹配指定元素后面的所有p元素*/
     .class~p{
          background: yellow;
             }
    

    效果图
    在这里插入图片描述

    展开全文
  • css层次选择器的理解

    千次阅读 2017-10-15 15:43:45
    1、css后代选择器 (1)语法:h1 em {color:red;} 表示的是从h1开始里面包含的所有的em元素变成红色,h1为祖先,其他的em都是后代,即选中后代,不管是儿子还是孙子,只要是都会被选中,为后代选择器。 (2)语法:...
    1、css后代选择器
    (1)语法:h1 em {color:red;} 表示的是从h1开始里面包含的所有的em元素变成红色,若em元素中还有其他元素,也会被选择。h1为祖先,其他的em都是后代,即选中后代,不管是儿子还是孙子,只要是都会被选中,为后代选择器。

    (2)语法:h1>em{color:red;} 仅仅选择直接子元素em,子元素中若有其他元素,则不再选择

    2.prev+next(前+后)选择器,如li+p{},则选择紧跟在li元素后面的所有p元素

    <!DOCTYPE HTML>
    <html>
    <head>
    <style type="text/css">
    li+li{color:red;}
    </style>
    </head>


    <body>
    <div>
    <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
    </ul>
    <ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
    </ol>
    </div>
    </body>
    </html>

    例子中的选择器可以选择紧接在第一个li后面的两个li,运行结果


    这个例子可以可能有点迷惑性,使用了li+li

    把代码改变一下,

    <!DOCTYPE HTML>
    <html>
    <head>
    <style type="text/css">
    li+p{color:red;}
    </style>
    </head>


    <body>
    <div>
    <ul>
    <li>List item 1</li>
    <p>4654165146</p>
    <em>List item 2</em>
    <p>5465465656</p>
    <li>List item 3</li>
    </ul>
    </div>
    </body>
    </html>

    这样写,有更加深刻的理解

    运行结果,如图


    3.prev~siblings(前~兄弟)选择器

    该选择器可以选取指定的prev元素后面根据siblings过滤的元素。例如,使用#prev~div可以选取所有(指在同一个嵌套中的)在id为prev的元素后面的div元素

    <!DOCTYPE HTML>
    <html>
    <head>
    <style type="text/css">
    li~p{color:red;}
    </style>
    </head>
    <body>
    <div>
    <ul>
    <p>456465465</p>
    <li>List item 1</li>
    <p>4654165146</p>
    <em>List item 2</em>
    <p>5465465656</p>
    <li>List item 3</li>
    </ul>
    <p>54654654654685465</p>
    </div>
    </body>
    </html>

    运行结果:


    展开全文
  • CSS层次选择器温故-2

    2019-10-29 19:14:59
    1.层次选择器 通过HTML的DOM元素间的层次关系获取元素,层次关系包括后代、父子、相邻兄弟和通用兄弟,通过其中某类关系可以方便快捷地选定需要的元素 2.语法 3.兼容性 IE7以及以上版本 4.后...
  • css层次选择器 1.后代选择器  写法:  父..父级选择器 父级选择器 子级选择器{样式1;样式2;}  作用:一级一级去寻找直到找到子级选择器,然后对子级进行样式控制。一般的标签的嵌套使用的比较多。  实际:...
  • 2.2 层次选择器 idea里代码规范是按:ctrl +alt+L快捷键 注释快捷键:ctrl+/ 1.后代选择器:在某个元素的后面 祖爷爷 爷爷 爸爸 你 <style> /*p{*/ /* background: #02ff00;*/ /*}*/ /* 后代选择器 */ ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,041
精华内容 416
关键字:

css层次选择器