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

标签选择器

一个 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 语法就是由选择器和申明块 {}组成，每个申明块中能够蕴含一个或多个款式申明，并且每条申明前面以分号 ; 结尾。

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

类选择器

类选择器用于形容一组标签的款式，一个类选择器能够在多个标签上应用。
语法：

.class_name{    属性：属性值;}

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

示例：
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 class="rabbit">小白兔</p>        <p>小狮子</p>        <p>小老虎</p>        <p>小猴子</p>    </body></html>

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

.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>