zoukankan      html  css  js  c++  java
  • CSS + > ~ 选择器

     一、后代选择器

     选取指定元素的后代元素

    与子元素选择器相比,后代选择器选取的不一定是直接后代(儿子),而是作用于所有后代元素(儿子、孙子、重孙…)都可以。

    实例:(选取类为 box的元素的 id为aa后代元素)

    HTML

    <div class="box">
        <p>emmmmmmmmmm……</p>
        <p>23333333333333333……</p>
        <div>
        <p>wwwwwwwwwwww</p>
        <p id="aa">QQQQQQQQQQ</p>
        </div>    
    </div>

    CSS

    .box #aa{  background: #aaf;  }

    二、(>)子元素选择器

    选取某个元素的直接后代元素

    后代元素选择器相比,子元素选择器  选取的一定是直接后代(儿子)

    实例:(选取所有类为box的元素,后代p元素)

    HTML

    <div class="box">
        <p>emmmmmmmmmm……</p>
        <p>23333333333333333……</p>
        <div>
        <p>wwwwwwwwwwww</p>
        <p id="aa">QQQQQQQQQQ</p>
        </div>    
    </div>

    CSS

    .box>p{  background: #aaf;}

    三、(+)相邻兄弟选择器

    选择紧连着另一元素后的元素,二者具有相同的父元素。只会选择的一个相邻的匹配元素

    实例:(选取h1后面的h2元素)

    HTML

    <div class="box">
        <h1>ssssssssssssssss</h1>
        <h2>emmmmmmmmmm……</h2>
        <h2>23333333333333333……</h2>
        <div>
        <p>wwwwwwwwwwww</p>
        <p id="aa">QQQQQQQQQQ</p>
        </div>    
    </div>

    CSS

    h1+h2{   background: #aaf;  }

    四、(~)后续兄弟选择器

    选取所有指定元素之后的相邻兄弟元素。

    相邻兄弟元素选择器 相比,

    相邻兄弟元素选择器 只是选择紧跟着的兄弟元素,

    后续元素选择器  选择所有符合条件的兄弟元素

    实例:(选取h1元素后的所有,相邻的兄弟元素h2元素)

    HTML

    <div>
        <h1>ssssssssssssssss</h1>
        <h2>emmmmmmmmmm……</h2>
        <p>wwwwwwwwwwww</p>
        <h2>23333333333333333……</h2>
    <div>

    CSS

    h1~h2{   background: #aaf;   }

  • 相关阅读:
    BZOJ 2190: [SDOI2008]仪仗队
    BZOJ 3195: [Jxoi2012]奇怪的道路
    【BZOJ-1068】压缩 区间DP
    【BZOJ-1103】大都市meg 树状数组 + DFS序
    【BZOJ-4326】运输计划 树链剖分 + 树上差分 + 二分
    【BZOJ-3721】Final Bazarek 贪心
    【BZOJ-4690】Never Wait For Weights 带权并查集
    【BZOJ-2503】相框 并查集 + 分类讨论
    【BZOJ-3653】谈笑风生 DFS序 + 可持久化线段树
    【BZOJ-3252】攻略 DFS序 + 线段树 + 贪心
  • 原文地址:https://www.cnblogs.com/nyw1983/p/11628364.html
Copyright © 2011-2022 走看看