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

412

我定義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