CSS 规则在没有类的情况下应用，为什么？-PHP中文网问答

文章专题学习下载问答编程词典手游最近更新

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

CSS 规则在没有类的情况下应用，为什么？

P粉795311321 2023-09-04 13:26:05

438

我定义CSS规则：

.info-specs h2, h3, h4, h5 { font-size: 1.5em; text-transform: none; }

这应该只适用于类为“info-specs”的元素中的 h5。然而，经过检查，我发现其他h5元素也在使用这个规则。为什么？下面是一个示例：

.info-specs h2, h3, h4, h5 { font-size:5em; text-transform: none; }

mytest

P粉795311321

全部回复 (1)

P粉3080890802023-09-05 11:21:47 1 楼

浏览器的 CSS 解释器将查找任何h3、h4和h5元素，并且仅查找h2 它将查看它是否在.info-specs内。逗号或分组选择器将逗号分隔的所有内容视为单独的选择。

您的问题的可能解决方案是：

/* These select for any h2, h3, h4 and h5 within .info-specs */ .info-specs h2, .info-specs h3, .info-specs h4, .info-specs h5 { text-decoration: underline; } /* These select for ant h2, h3, h4 and h5 that are direct chldren of .info-specs */ .info-specs > h2, .info-specs > h3, .info-specs > h4, .info-specs > h5 { color: red; }

 In this example the headings within inf-specs will all be underlined but only the headings that are direct children of info-specs will be coloured red.
 Heading 2
 Heading 3
  Heading 3 in another div
 
 Heading 4
 Heading 5