代码之家 › 专栏 › 技术社区 › datafiddler

CSS级联(后代)样式[重复]

css-cascade css-selectors css html

-1

datafiddler · 技术社区 · 11 月前

我读过CSS中的后代选择器,但无法使其工作:

<!DOCTYPE html>
<html>
<head>
<style>
.c1 div { background-color:red;}
h1 {color: #00b339}
</style>
</head>
<body>
<h1>Demo of the descendant selector</h1>
<p class="c1">Outer paragraph <div class="c2">Inside nested element</div></p>
</body>
</html>

在样式选择器中,类之间有一个空格 .c1 和内部 div 如果我用逗号替换该空格,则样式选择器定义的工作方式类似于OR和所有类“c1”和所有 div 元素受到影响。但有了这个空间,内心什么也不会发生 div 元素。目标是将样式应用于 Inside nested element 只有。

无论我是通过类还是html类型定义来构造该后代。

我做错了什么?(我正在win11上用当前的chrome浏览器测试本地文件)

1 回复 | 直到 11 月前

MoBadraan 11 月前

https://www.w3.org/TR/html401/struct/text.html

P元素代表一个段落。它不能包含块级别元素(包括P本身)。

当你在DevTools中检查元素时,你会注意到浏览器关闭了 p 打开前标记 div 标签以避免 div 里面 p 标签。在结束标签之后 div ,它打开了一个空 p 元素。

<p class="c1">Outer paragraph</p>
<div class="c2">Inside nested element</div>
<p></p>

你无法回避这条规则,也不应该回避,因为段落的目的是代表文本的段落。

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

9 月前

Jamie · 在CSS链接的文件名中添加Jinja占位符

9 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

9 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

9 月前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

9 月前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

9 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

10 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

10 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

10 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

10 月前