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

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 class="one two">段落</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元素