首页 > 其他分享 >万象更新 Html5 - css: selector 选择器: 后代选择器,子选择器,相邻兄弟选择器,兄弟选择器

万象更新 Html5 - css: selector 选择器: 后代选择器,子选择器,相邻兄弟选择器,兄弟选择器

时间:2024-09-24 10:37:09浏览次数:10  
标签:span color 万象更新 selector 兄弟 Html5 选择器

源码 https://github.com/webabcd/Html5
作者 webabcd

万象更新 Html5 - css: selector 选择器: 后代选择器,子选择器,相邻兄弟选择器,兄弟选择器

示例如下:

css\src\selector\demo3.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代选择器,子选择器,相邻兄弟选择器,兄弟选择器</title>
    <!-- 引用外部样式表
    <link rel="stylesheet" type="text/css" href="style.css" />
    -->
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        /*
            后代选择器(descendant selector)
            匹配的是 .c1 内的所有 span 元素,无论几层嵌套
         */
        .c1 span {
            color: red;
        }

        /*
            子选择器(child selector)
            匹配的是 .c2 的所有子 span 元素,仅包括 .c2 的儿子,孙子和孙子之后的都不包括
         */
        .c2 > span {
            color: green;
        }

        /*
            相邻兄弟选择器(adjacent sibling selector)
            匹配的是 .c3 内的
            div 的同辈分的下一个 span 元素
         */
        .c3 div + span {
            color: blue;
        }

        /*
            兄弟选择器(sibling selector)
            匹配的是 .c4 内的
            div 的同辈分的之后的所有 span 元素
         */
        .c4 div ~ span {
            color: blue;
        }

    </style>
</head>
<body>

<div class="c1">
    <span>span 1</span>
    <div>
        <span>span 2</span>
    </div>
    <span>span 3</span>
</div>
<br /><br />

<div class="c2">
    <span>span 1</span>
    <div>
        <span>span 2</span>
    </div>
    <span>span 3</span>
</div>
<br /><br />

<div class="c3">
    <span>span 0</span>
    <div>
        <span>span 1</span>
    </div>
    <span>span 2</span>
    <br />
    <span>span 3</span>
</div>
<br /><br />

<div class="c4">
    <span>span 0</span>
    <div>
        <span>span 1</span>
    </div>
    <span>span 2</span>
    <br />
    <span>span 3</span>
</div>

</body>
</html>

源码 https://github.com/webabcd/Html5
作者 webabcd

标签:span,color,万象更新,selector,兄弟,Html5,选择器
From: https://www.cnblogs.com/webabcd/p/18428598/html5_css_src_selector_demo3

相关文章

  • 万象更新 Html5 - css: selector 选择器: 伪类(pseudo class)
    源码https://github.com/webabcd/Html5作者webabcd万象更新Html5-css:selector选择器:伪类(pseudoclass)示例如下:css\src\selector\demo4.html<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><ti......
  • 万象更新 Html5 - css: selector 选择器: 伪元素(pseudo element)
    源码https://github.com/webabcd/Html5作者webabcd万象更新Html5-css:selector选择器:伪元素(pseudoelement)示例如下:css\src\selector\demo5.html<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><......
  • 万象更新 Html5 - css: counter 计数器
    源码https://github.com/webabcd/Html5作者webabcd万象更新Html5-css:counter计数器示例如下:css\src\counter.html<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>counter计数器</titl......
  • 万象更新 Html5 - css: float 布局: 基础
    源码https://github.com/webabcd/Html5作者webabcd万象更新Html5-css:float布局:基础示例如下:css\src\layout\float\demo1.html<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>float......
  • 万象更新 Html5 - css: float 布局: 通过 float 布局实现 3 栏式布局
    源码https://github.com/webabcd/Html5作者webabcd万象更新Html5-css:float布局:通过float布局实现3栏式布局示例如下:css\src\layout\float\demo2.html<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8">&......
  • 万象更新 Html5 - css: flex 布局: flex-direction, flex-wrap, flex-flow
    源码https://github.com/webabcd/Html5作者webabcd万象更新Html5-css:flex布局:flex-direction,flex-wrap,flex-flow示例如下:css\src\layout\flex\demo1.html<!--flex布局(flex-flexibility可伸缩性)1、在容器上指定displayflex-容器......
  • css的属性选择器使用
    感谢https://www.runoob.com/css/css-attribute-selectors.html 的底部评论https://www.runoob.com/cssref/css-selectors.html虽然一直有用到属性选择器,但是缺乏全面的了解,都是用到了就百度,看到一个大佬的总结评论,做个记录CSS属性选择器~=,|=,^=,$=,*=的区别"v......
  • 浅谈在C#中调用COM组件——以文件夹选择器为例
    浅谈在C#中调用COM组件——以文件夹选择器为例【文/张赐荣】在现如今的这个时代,提到跨语言调用或者系统级操作,许多开发者第一时间会想到.NET、WebAPI等现代技术。然而,不得不说,COM组件这门技术可能在许多年轻开发者的学习清单中早已被“扫进角落”了。毕竟现如今.NET、WebAPI......
  • el-cascader 级联选择器 选中范围扩大方式
    遇到的问题:el-cascader打开的选择框只能点击圆点才能被选中,点击文字并不能选中通过组件库配置项popper-class来实现class上面写样式:注意不能是scoped的样式隔离,<stylerel="stylesheet/scss"lang="scss">.cascaderCla{color:red;&.el-radio{......
  • Ant select 选择器 地址联动 多层包裹
    //省<a-selectv-model:value="formState.address"style="width:180px;margin-right:20px":options="province.map((prov)=>({value:prov.name}))"......