css中的一些選擇器的用法總結

2021-07-14 12:01:35 字數 1192 閱讀 6200

1.選擇器分組

如 :h1,h2,h3,p,div

color:red;

這些分類中的字型顏色都是紅色

2.派生選擇器(上下文選擇器)

div p

color:red;

將div中的p元素的字型設定為紅色(與分組選擇器的不同是分組情況下元素是用逗號隔開,而派生使用空格隔開)

另外派生選擇器還可以用

#ok p(注意有空格)

的形式,以為id為ok的元素中的p元素進行設定。

而p#ok(注意沒有空格)

表示id為ok的p元素。

同樣對於類選擇器也是這樣的

例如有class="fontcolor"類。

.fontcolor p(注意有空格)

color:red;

表示在包含類fontcolor中的更大元素中的p元素的字型為紅色。

p.fontcolor

color:red;

表示是包含類fontcolor的p元素字型顏色為紅色。

類選擇器還可以選擇多個,用空格分開

例如段落

以為p同時採用.one和.two兩個類

對於同時採用one和two類的元素還可以新增特殊樣式

例如:.one.two(注意沒有空格)

text-decoration:underline

表示同時含有one和two兩個類的元素文字新增下劃線

對於兩個類連線的情況之下,同樣是試用於結合元素選擇器和派生選擇器

例如:.one.two p(p和連線類有空格)

color:red;

表示包含連線類的更大的元素中的p元素字型變為紅色

p.one.two

表示包含連線類的p元素顏色變為紅色。

div .one.two

color:red';

表示div元素中的包含連線類的元素字型設定為紅色

類選擇器和id選擇器是區分大小寫

偽類選擇器中的:first-child元素要是注意

它是指作為第乙個元素的元素

例如:p:first-child是指做為第乙個元素的p元素

對CSS中各個選擇器的一些總結

類選擇器 語法 類選擇器名稱 注意 a.英文原點開頭 b.類選擇器名稱可以任意起 除中文名外 但第一位不能為數字 用法 用合適的標籤把要修飾的內容標記起來,然後再該標籤的開始標籤裡面使用class 類選擇器名稱 為標籤設定乙個類 要修飾的內容 c.可以與元素選擇器進行結合一起使用 p.stress ...

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

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

關於css選擇器的一些細節

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