CSS选择器的类别

1.标签选择器

（1）基本格式

 

标签名 {

        属性1:属性值1;  属性2:属性值2;  属性3:属性值3; 

} 

or

元素名{

        属性1:属性值1;  属性2:属性值2;   属性3:属性值3;

}

（2）示例

[code]h1{
font-size: 20px;
color: red;
font-weight: normal;
}

[code]<h1>The violent delights have violent ends</h1>

2.类选择器

 （1）基本格式

  .类名{

        属性1:属性值1;   属性2:属性值2;   属性3:属性值3; 

}

    类选择器最大的优势是可以为元素对象定义单独或相同的样式。 可以选择一个或者多个标签

 

注意： 1.长名称或词组可以使用中横线来为选择器命名。 2.不建议使用“_”下划线来命名CSS选择器。 3.不要纯数字、中文等命名， 尽量使用英文字母来表示。

 

（2）示例

 

[code]    <style>
.test{
font-size: 10px;
color: pink;
font-weight: bold;
}
</style>

[code]<h2 class="test">The violent delights have violent ends</h2>

    多类名可以叠加，如：

[code]<h2 class="test test2">The violent delights have violent ends</h2>

 

3.id选择器

 

（1）基本格式

#id名{

        属性1:属性值1;   属性2:属性值2;  属性3:属性值3; 

 }

    元素的id值是唯一的，只能对应于文档中某一个具体的元素。

   与类选择器相比，用法虽然相似，但是id选择器只能使用一次，不能多次重复，而类选择器则可以在多个表单控件上多次使用。 

（2）示例

[code]    <style>
#test{
font-size: 30px;
color: green;
font-weight: bold;
}
</style>

[code]<h2 id="test">The violent delights have violent ends</h2>

4.通配符选择器

（1）基本格式

    所有选择器中作用范围最广的，能匹配页面中所有的元素。

* { 

    属性1:属性值1;   属性2:属性值2;   属性3:属性值3; 

 }

    但是在真正的编程中比较少用。

（2）示例

[code]    <style>
*{
margin: 0;                    /* 定义外边距*/
padding: 0;                   /* 定义内边距*/
}
</style>

[code]<h1>The violent delights have violent ends</h1>

<h2 class="test">The violent delights have violent ends</h2>

<h2 id="test">The violent delights have violent ends</h2>

<h2 >The violent delights have violent ends</h2>

 

阅读更多