CSS的三种基础选择器

时间 2021-04-07

标签 css html 学习字体 code htm utf-8 class meta 栏目 CSS 繁體版

原文原文链接

标签选择器
类选择器
ID选择器

标签选择器

一个 HTML 页面是经过不少标签组成的，CSS 标签选择器就是用来声明这些标签的，由于每个 HTML 标签的名称均可以做为相应的标签选择器的名称。css

示例：html

下面是一段html代码：学习

<!DOCTYPE>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS学习</title>
        <link rel="stylesheet" type="text/css" href="index.css">
    </head>
    <body>
        <h3>学习</h3>
        <p>我爱学习，学习使我快乐。</p>
    </body>
</html>

若是咱们要为这两个标签订义 CSS 样式，就能够直接在 .css 文件内经过标签选择器来声明样式：字体

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

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

除了上述例子中的 p、h3 标签能够做为标签选择器，其余的例如html、body、a、img等标签都是能够做为标签选择器的。htm

类选择器

类选择器用于描述一组标签的样式，一个类选择器能够在多个标签上使用。
语法：utf-8

.class_name{

    属性：属性值;
}

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

示例：
html代码：class

<!DOCTYPE>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS学习</title>
        <link rel="stylesheet" type="text/css" href="index.css">
    </head>
    <body>
        <h3>动物园</h3>
        <p class="rabbit">小白兔</p>
        <p>小狮子</p>
        <p>小老虎</p>
        <p>小猴子</p>
    </body>
</html>

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

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

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

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

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

ID选择器

ID 选择器的是以井号#开头来定义的。而类选择器是以点.来定义的。
ID 选择器在 HTML 中是能够经过id属性来使用。而类选择器是经过class属性来使用的。
同一个页面中一个ID选择器只能在中出现一次，是惟一的。而类选择器能够在屡次出现，因此ID选择器的针对性更强。

示例：

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

#only{
    background-color: pink;
}

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

<!DOCTYPE>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS学习</title>
        <link rel="stylesheet" type="text/css" href="index.css">
    </head>
    <body>
        <h3>动物园</h3>
        <p class="rabbit">小白兔</p>
        <p>小狮子</p>
        <p>小老虎</p>
        <p id="only">小猴子</p>
    </body>
</html>