【前端】【html/css】前端学习之路（一）：CSS选择器的类别

CSS选择器的类别

1.标签选择器

（1）基本格式

 

标签名 {

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

} 

or

元素名{

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

}

（2）示例

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

The violent delights have violent ends

2.类选择器

 （1）基本格式

  .类名{

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

}

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

 

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

 

（2）示例

 

The violent delights have violent ends

    多类名可以叠加，如：

The violent delights have violent ends

 

3.id选择器

 

（1）基本格式

#id名{

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

 }

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

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

（2）示例

The violent delights have violent ends

4.通配符选择器

（1）基本格式

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

* { 

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

 }

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

（2）示例

The violent delights have violent ends

The violent delights have violent ends

The violent delights have violent ends

The violent delights have violent ends