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元素