關於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...