關於css選擇器的一些細節

2021-09-20 01:10:00 字數 1967 閱讀 1123

使用標籤名.類名的方式解決

如果希望特別強調其中的某乙個或幾個元素,處理的方案有三個:

1.id選擇器

2.class選擇器

3.層級選擇器

看下面的**:

疑是地上霜

舉頭望明月

低頭思故鄉

李白

重新整理瀏覽器後,顯示的效果如下:

現在想讓李白這兩個字變成紅色斜體,可以有三種方法:

**如下:

疑是地上霜

舉頭望明月

低頭思故鄉

李白

重新整理瀏覽器後的效果如下:

**如下:

疑是地上霜

舉頭望明月

低頭思故鄉

李白

重新整理瀏覽器後的效果也是一樣的.

**如下:

疑是地上霜

舉頭望明月

低頭思故鄉

李白

重新整理瀏覽器後的效果也是一樣的.

可以看出css是非常靈活的,但是這樣一來什麼時候該用哪個選擇器呢??

. 首先id選擇器用的地方並不多,盡量不要使用id選擇器

. 使用的時候優先選擇用類選擇器

. 再考慮用html標籤選擇器

. 再然後再考慮用組合選擇器

. 最後才考慮會id選擇器

. 使用後代選擇器時,盡量使用標籤選擇器或者類選擇器和標籤選擇器的組合,

. id選擇器和類選擇器的優先順序

例項**如下:

hello world

重新整理瀏覽器,顯示如下:

可以看到顯示的字型顏色是藍色的,說明id選擇器的優先順序高於類選擇器.

得出結論:

. 乙個元素可以同時有id選擇器和類選擇器,當id選擇器和類選擇器發生衝突時,id選擇器的優先順序高於類選擇器

. 乙個元素最多有乙個id選擇器,但是可以有多個類選擇器.

. 當乙個元素被多個類選擇器修飾地,用空格隔開

**如下:

hello world

重新整理瀏覽器後顯示的效果如下:

假如現在在class2這個選擇器中設定字型顏色為紅色,會怎麼樣呢?

**如下:

hello world

重新整理瀏覽器顯示的效果如下:

可以看到顏色變成紅色.

結論如下:

. 多個類選擇器在修飾同乙個元素時,以寫在後面的為準

. 當優先順序相同的情況下,在發生衝突時,以寫在style內容中的後面的那個為準

. 乙個元素被多個選擇器同時修飾時,優先順序是:

!important設定 > 行內樣式設定>id選擇器>類(偽類)選擇器>html選擇器>萬用字元選擇器>html屬性設定>繼承樣式

關於css選擇器的一些細節

使用標籤名.類名的方式解決 如果希望特別強調其中的某乙個或幾個元素,處理的方案有三個 1.id選擇器 2.class選擇器 3.層級選擇器 看下面的 疑是地上霜 舉頭望明月 低頭思故鄉 李白重新整理瀏覽器後,顯示的效果如下 現在想讓李白這兩個字變成紅色斜體,可以有三種方法 如下 疑是地上霜 舉頭望明...

對CSS選擇器的一些學習總結

分組 你可以對選擇器進行分組,這樣,被分組的選擇器就可以分享相同的宣告。用逗號將需要分組的選擇器分開。在下面的例子中,我們對所有的標題元素進行了分組。所有的標題元素都是綠色的。h1,h2,h3,h4,h5,h6 繼承 根據 css,子元素從父元素繼承屬性。但是當你不希望子元素繼承父元素的屬性時該怎麼...

常用的一些 CSS3 選擇器

list item list item list item 選擇器 container ul只會匹配到第乙個ul,也就是 container的子元素ul,而不是li裡面的ul,但是div ul則可以匹配到所有div裡面的ul。檢視演示 相容性ie7 但是如果我們給a標籤新增乙個data filety...