css基础选择器教程,CSS基础选择器

CSS基础选择器

1. 标签选择器(元素选择器)

使用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的样式。

标签名 {

属性1: 属性值1;

属性2: 属性值2;

属性3: 属性值3;

...

}

/*例如将所有的span改为蓝色背景*/

span {

background-color: blue;

}

作用：

标签选择器可以把某一类标签全部选择出来，比如所有的div标签。

优点：

能快速为页面中同类型的标签统一设置样式。

缺点：

不能设计差异化样式，只能选择全部的当前标签。

2. 类选择器

可以差异化选择不同的标签，单独选一个或某几个标签。

类选择器在HTML中以class属性表示，在CSS中，类选择器以一个“.”表示。

.类名 {

属性1: 属性值1;

...

}

/*例如将拥有blue类的HTML元素均设为蓝色*/

.blue {

color: blue;

}

/*某个HTML元素要使用上面的样式时，通过调用类名使用*/

注：

注意类名前的小点

长名称或多个词组可以使用"_"隔开

尽量使用英文字母表示

命名要有意义

3. 类选择器-多类名

可以给一个标签指定多个类名，从而达到更多的选择目的。

多类名使用方式

在标签class属性中写多个类名

多个类名之间必须用空格分开

这个标签就可以分别具有这些类名的样式

多类名在开发中的使用场景

可以把一些标签元素相同的样式(共同的部分)放到一个类里面，这些标签都可以调用这个公共的类，然后再调用自己独有的类，从而节省CSS代码，统一修改也非常方便。

4. id选择器

可以为标有特定id的HTML元素指定特定的样式。

HTML元素以id属性来设置id选择器，CSS中id选择器以“#”来定义。

#id名 {

属性1: 属性值1;

...

}

/*例如将id为blue的元素的内容设置为蓝色*/

#blue {

color: blue;

}

/*某个HTML元素要使用上面的样式时，通过id名调用*/

id选择器与类选择器的区别：

类选择器可以使用多次，id选择器只能使用一次

类选择器在修改样式中用的最多，id选择器一般用于页面唯一性的元素上，经常和JavaScript搭配使用

5. 通配符选择器

选取页面中所有元素。在CSS中，使用“*”定义。

/*清除所有元素初始指定的内外边距*/

* {

margin: 0;

padding: 0;

}

注：通配符选择器不需要调用，自动就给所有的元素使用样式。

6.总结

基础选择器

作用

特点

使用情况

用法

标签选择器

可以选出所有相同的标签

不能差异化选择

较多

p {color: blue;}

类选择器

可以选出一个或多个标签

可以根据需求选择

非常多

.blue {color: blue;}

id选择器

一次只能选择一个标签

id属性只能在每个HTML文档中出现一次

一般和js搭配

#blue {color: blue;}

通配符选择器

选择所有的标签

选择的太多，有部分不需要

特殊情况使用

* {color: blue;}