CSS的三种基础选择器

一个 HTML 页面是通过很多标签组成的，CSS 标签选择器就是用来声明这些标签的，因为每一个 HTML 标签的名称都可以作为相应的标签选择器的名称。

示例：

下面是一段html代码：



    
        
        CSS学习
        
    
    
        学习
        我爱学习，学习使我快乐。

如果我们要为这两个标签定义 CSS 样式，就可以直接在 .css 文件内通过标签选择器来声明样式：

h3{
    color: red ;
}
p{
    color: green;
}

CSS 语法就是由选择器和声明块 {}组成，每个声明块中可以包含一个或多个样式声明，并且每条声明后面以分号 ; 结尾。

除了上述例子中的 p、h3 标签可以作为标签选择器，其他的例如html、body、a、img等标签都是可以作为标签选择器的。

类选择器用于描述一组标签的样式，一个类选择器可以在多个标签上使用。
语法：

.class_name{

    属性：属性值;
}

类选择器前面必须有一个点 .，这个点必不可少，是类选择器的标志。类选择器的名称 class_name 是自定义的，选择器中的属性和属性值跟标签选择器中一样。

示例：
html代码：

要给“小兔子” 字体样式设置为粉色加粗，可以自定义一个类选择器：

.rabbit{
    color: pink;
    font-weight: bold;
}

然后在 HTML 标签上通过 class 属性来使用定义好的类样式，格式为：

<标签名 class="类名称">标签内容

类选择器有一个好处就是，我们可以在同一个页面中多个 HTML 标签上，使用同一个类选择器。

示例：

通过#来定义一个ID选择器，设置背景颜色为粉色的样式：

#only{
    background-color: pink;
}

然后在 HTML 中通过 id 属性使用这个ID选择器：