CSS多類選擇器及類的巢狀使用

2021-09-19 17:13:24 字數 975 閱讀 9749

在下面的例子中,有兩個類選擇器important和warming

this paragraph is very important.

this is a warning.

this paragraph is a very important warning.

this is a paragraph.

結果如圖

17行的p標籤中同時出現了兩個類名並用空格隔開,同時有了兩個類的樣式

如果在style標籤中增加一行「.important.warning 」

「.important.warning 」就表示當類important和warning同時存在時的樣式

我們再來做乙個測試

this paragraph is very important.

this is a warning.

this is a warning.

this paragraph is a very important warning.

this is a paragraph.

結果

???發生了什麼

這次更改是將「.important.warning 」改為「.important .warning 」就是兩個類中間多了乙個空格,下面的div標籤中含有類important,其中的p標籤含有warning,當這兩級類巢狀時就出發了「.important .warning 」(有空格)的樣式。

CSS 多類選擇器

在上一節中,我們處理了 class 值中包含乙個詞的情況。在 html 中,乙個 class 值中可能包含乙個詞列表,各個詞之間用空格分隔。例如,如果希望將乙個特定的元素同時標記為重要 important 和警告 warning 就可以寫作 class important warning this ...

CSS 多類選擇器

寫的 多了,就會發現,自己越來越無知了,總以為html css很簡單,已經掌握的很熟練了,其實我還差的很多。平時沒有用過css的這種寫法.a.b上網一查才明白。參考 1 在 html 中,乙個 class 值中可能包含乙個詞列表,各個詞之間用空格分隔。例如,如果希望將乙個特定的元素同時標記為重要 i...

CSS 多類選擇器

寫的 多了,就會發現,自己越來越無知了,總以為html css很簡單,已經掌握的很熟練了,其實我還差的很多。平時沒有用過css的這種寫法.a.b上網一查才明白。參考 1 在 html 中,乙個 class 值中可能包含乙個詞列表,各個詞之間用空格分隔。例如,如果希望將乙個特定的元素同時標記為重要 i...