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

CSS子体选择器[重复]

css html

-1

vicatcu · 技术社区 · 5 年前

我快疯了:

HTML格式:

<div><h1>Hello World!</h1></div>

CSS格式:

*:not(div) h1 { color: #900; }

h1 元素的祖先不是 div 元素…?“因此,“你好,世界!”不应该是红色的,但它仍然是红色的。

对于上述标记,添加子combinator是可行的:

*:not(div) > h1 { color: #900; }

但不影响 h1型 元素,如果它不是 部门

<div><article><h1>Hello World!</h1></article></div>

h1型 部门

0 回复 | 直到 10 年前

Community Mohan Dere 9 年前

h1 元素的祖先不是 div 元素…?“

是的。但是在一个典型的HTML文档中, 每一个 h1型 至少有两个祖先不是 body 和 html

这就是尝试使用 :not() :它不能可靠地工作,尤其是当 :not() .foo:not(div) . 只需将样式应用于所有应用程序,您就可以轻松得多 h1型 元素并用 div h1

Selectors 4 , 将能够使用它排除具有特定祖先的元素。由于选择器的工作方式,为了可靠地工作,必须对元素本身而不是祖先进行否定,因此语法看起来会有些不同:

h1:not(div h1) { color: #900; }

BoltClock 14 年前

这个 <html> <div> <body> 元素不是 <部门>

所以条件“有一个祖先不是 <部门> “将适用于所有元素。

> <article> 不是div,所以匹配 *:not(div) 我也是。

推荐文章

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

1 年前

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

1 年前

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

1 年前

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

1 年前

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

1 年前

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

1 年前

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

1 年前

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

1 年前

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

1 年前

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

1 年前