[技術分享] CSS中的多重選擇器(Multiple Selectors)包含空白 ... | css class element
在HTML中,我們有時候會對同一個標籤給予多個Class名稱,像是
在HTML中,我們有時候會對同一個標籤給予多個Class名稱,像是
這裡,我們需要進一步區別到底是.one.two{ },.one .two{ },或這是.one, .two{ }。乍看之下,這三者都長得很像,但實際上是有很大的不同的。
第一個的 one 和 two 中間沒有包含空格,這個的意思表示,某個區塊必須同時具有 one 和 two 的 class 時,才能被 CSS 所選擇到到。 第二個的 one 和 two 中間包含空格,意思是指,我必須要是在 one 裡面的 two,才會被選擇到。 第三個的 one 和 two 中間包含逗號,意思是指 class 中有 one 或 two,都會被編輯器所選擇到。 簡單來說,沒空格表示必須同時包含才會被選取;有空格表示後面的 class 被鑲嵌在前面的 class 中才會被選取;逗號則表示只要有其中一個 class 就會被選取到 。 程式範例 讓我們用下面這段 HTML 語法來看個...