HTML并集,交集,子代,后代选择器

1,交集选择器

他们必须满足既是 p又是.box的关系(直接连写,没有任何符号)

html 复制代码
p.box{
    color:red;
}
<div class="box"> 1 </div>
<p class="box">2</p>
<p>3</p>

2.并集选择器

将div,p,span同时设置一种样式,颜色啥的都可以设置。(中间用逗号分隔)

html 复制代码
div,p,span{
       color:red;
    }

3.后代选择器:后代泛指儿子元素,孙子元素,重孙子元素都包含在内了(中间用空格隔开)

html 复制代码
    div span{
       color:#333;
    }
    <span>span标签</span>
    <div>
    <span>这是div的儿子</span>
   </div>

4.子代选择器:只包含儿子元素(用>隔开)

html 复制代码
div>span{
       color:#333;
    }
    <span>span标签</span>
    <div>
    <span>这是div的儿子</span>
    <p>
    <span>孙子</span>
    </p>
   </div>
相关推荐
b1gbrother16 分钟前
让你的Claude Code变得更聪明
前端·程序员
国家不保护废物24 分钟前
多模态模型数据传输的秘密武器:html5对象Blob深度解析
前端·面试·html
用户25191624271124 分钟前
Canvas之概述,画布与画笔
前端·javascript·canvas
南方kenny24 分钟前
前端小知识:搞懂 BFC块级格式化上下文,告别面试“拦路虎”!
前端·css·面试
邵洛25 分钟前
前端导出excel表格并修改导出表格样式
前端
风舞25 分钟前
JavaScript 核心概念及代码示例的梳理
前端
学长学姐我该怎么办27 分钟前
从零开始学前端html篇2
前端·html
尘世中一位迷途小书童28 分钟前
从零实现 Canvas 图形拖拽:让你的网页动起来!
前端
mrsk29 分钟前
JavaScript之变量的解构赋值全面解析(●'◡'●)
前端·javascript·面试
归于尽30 分钟前
回调函数在Node.js中是怎么执行的?
前端·javascript·node.js