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