css子代选择器问题

css 子代选择器不是只能作用于亲儿子吗？为什么下面代码却能作用于其儿子的儿子


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style type="text/css">
      .box>div{
       color: red;
       width: 50px;
       height: 20px;
       border: solid;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <p>
        <div>你好</div>
      </p>
    </div>
  </body>
</html>

显示结果

写回答
好问题 0 提建议
关注问题
分享
邀请回答
编辑收藏删除
收藏举报

2条回答默认最新

崽崽的谷雨 2022-09-21 01:51

关注

你审查元素会发现 p 被解析成两个 p了。因为不建议使用p元素包裹div


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style type="text/css">
        .box>div {
            color: red;
            width: 50px;
            height: 20px;
            border: solid;
           
        }

       
    </style>
</head>

<body>
    <div class="box">
        <div>666</div>
        <span>
            <div>你好</div>
        </span>
    </div>
</body>

</html>

展开全部

本回答被题主选为最佳回答 , 对您是否有帮助呢? 本回答被专家选为最佳回答 , 对您是否有帮助呢? 本回答被题主和专家选为最佳回答 , 对您是否有帮助呢?

编辑记录

查看更多回答(1条)

编辑

预览

报告相同问题？

关注问题

如何利用css选择器选中纯文字元素 css javascript 前端
2022-09-19 04:23

回答 4 已采纳没法直接选中，先在父亲div上设置你要的样式（会继承给它），再设置两个兄弟节点a11跟a22使用其他的样式，使父亲的样式作用不到两个兄弟节点上。如果有条件的话还是给纯文本加个标签包起来吧好控制些
CSS关于伪类选择器的使用 css3 html5 前端
2022-02-28 05:27

回答 4 已采纳这玩意儿就像地址一样，从上到下，便于查找和区分位置，其次他有些地方并非固定的，就像你截图的那块导航，他不一定是固定的，他有可能是后台传过来的数据，前端只是用于渲染，在渲染过程中为某个类别添加固定的类名
CSS选择器能不能选取前一个元素？ css html5 前端
2021-08-19 02:46

回答 3 已采纳选不了，你可以结合jquery设置。
CSS 子代选择器和后代选择器
2022-04-14 16:02

m0_63701007的博客 1. 有2种表达方式 .div>li .div li 2种代码的运行结果如下第一种 CSS html .div>...是子选择器 ...第二种带空格的是后代选择器 ...区别顾名思义，子选择器只选择子代，后代选择器就是子，孙都选择 ...
css的hover兄弟选择器怎么控制前面的元素 css3 html5 前端
2022-03-12 08:50

回答 2 已采纳 <div class="parent"> <div>第一个div<div> <div class="div2">第二个div<d
关于css中选择器使用意外错误 css
2018-09-23 22:51

回答 2 已采纳 css属性采用就近原则，所谓就近有两个含义，在空间上，和它关系越密切的越被突出，比如一个body套着一个div套着一个span 如果span有颜色，它肯定最代表设计者试图让span拥有的颜色，它如果
sublimes每次保存css文件，选择器间隔越来越远？ css 前端
2022-02-06 15:00

回答 1 已采纳这应该是自动格式化造成的，打开菜单栏Perferences->Package Settings->HTML/CSS/JS Prettify->Plugin Options - De
前端研习录（05）——CSS后代选择器、子代选择器、相邻兄弟选择器及通用兄弟选择器
2022-06-21 08:09

清风不渡的博客重拾前端记忆，记录学习笔记，现在进入CSS关系选择器类型部分，CSS属性大致分为后代选择器、子代选择器、相邻兄弟选择器及通用兄弟选择器这四类，以下一一说明，为方便记录，采用内部样式进行举例。说明：...
css选择器\.有什么用途前端有问必答
2022-07-11 09:53

回答 3 已采纳当css class类名是数字开头或者包含特殊字符的话，在写CSS样式的的类名的时候要进行Unicode转换
CSS：last-child选择器和nth-last-child(n)选择器为什么不执行 css html 前端
2022-04-07 03:57

回答 2 已采纳一开始我还不信，结果试了一下真的这样。找了一下原因，发现了这个观点：css匹配规则要满足区间闭合。我试着套一层div就能识别了，但是看别人能识别，估计跟开发工具有关吧(我是用hbuilder x)，编
前端学习遇到的问题2：css用html来进行选择设置和用body来进行选择设置有区别么? css html 前端
2022-09-04 00:54

回答 1 已采纳你可以放在一起
【前端CSS】CSS中所有类型的选择器汇总
2023-12-23 13:11

努力奋斗的张同学的博客动态伪类（Dynamic pseudo-class）是指在CSS选择器中用来匹配特定条件下发生变化的元素的伪类。伪类（pseudo-class）是CSS中的一个概念，它表示一种特殊的选择器，用于。它们与元素当前的状态或上下文相关联，可以...
CSS - 选择器详解 - 子代、后代选择器详解 - 伪类选择器 - 测试
2023-03-06 06:29

沐修的博客测试代码：指定id的子代选择器后代选择器 (以空格隔开)指定 id 的后代选择器指定 class 类的后代选择器多空格后代选择器详解 (特别重要)伪类选择器 :参考链接：测试准备：新建一个测试项目文件夹 test，然后在 ...
前端——CSS选择器的常见用法详解
2023-05-14 06:58

硌手的小虫子@的博客 CSS选择器的常见用法
CSS的选择器(超详细)
2022-11-21 13:18

兰de宝贝的博客一、常用的选择器 1.元素选择器 ...2.子代选择器 3.相邻兄弟选择器 4.通用兄弟选择器 5.案例四、属性选择器 五、伪类选择器 1.常用的伪类选择器 2.否定伪类 3.元素的伪类六、伪元素选择器
没有解决我的问题, 去提问

问题事件

关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
已结题（查看结题原因） 9月21日
关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
已采纳回答 9月21日
关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
创建了问题 9月20日

css子代选择器问题

css 子代选择器不是只能作用于亲儿子吗？为什么下面代码却能作用于其儿子的儿子

显示结果

2条回答 默认 最新

问题事件

2条回答默认最新