• 技术文章 >Web开发 >css教程

    css普通兄弟选择器如何理解

    小妮浅浅小妮浅浅2021-10-23 17:17:17原创6080

    1、CSS普通兄弟选择器是指所有连接到另一个元素的元素,两者都有相同的父元素。

    2、普通兄弟选择器使用波浪号(~)作为普通兄弟的结合符。

    实例

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>普通兄弟选择器</title>
      <style>
        .ancestor {
          width: 500px;
          height: 300px;
        }
        .parent {
          width: 300px;
          height: 200px;
        }
        .child {
          width: 200px;
          height: 100px;
        }
        /* 定位的是 .child1 的后面兄弟为 div 的元素 */
        .child1~div {
          background-color: lightcoral;
        }
      </style>
    </head>
    <body>
      <div>
        this is ancestor.
        <div>
          this is parent.
          <div>this is child0.</div>
          <div>this is child1.</div>
          <div>this is child2.</div>
          <div>this is child3.</div>
        </div>
      </div>
    </body>
    </html>

    以上就是css普通兄弟选择器的理解,希望对大家有所帮助。更多css学习指路:css教程

    专题推荐:css 普通兄弟选择器
    上一篇:css相邻兄弟选择器是什么 下一篇:没有了

    相关文章推荐

    • css中flex-basis属性是什么• css中align-self属性是什么• css代码的规范整理• css选择器的使用规范• css媒体查询的使用• css中有哪些命名规范• CSS中的三大特性• css权重的计算规则• css精灵图技术是什么• css滑动门技术是什么• css字母间距如何理解• css单词间距是什么• css中word-break属性是什么• css相邻兄弟选择器是什么

    全部评论我要评论

    © 2021 Python学习网 苏ICP备2021003149号-1

  • 取消发布评论
  • 

    Python学习网