CSS 基础选择器

CSS 规则由两个主要的部分组成，选择器以及一条或多条声明。

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

选择器用于指定 CSS 样式的 HTML 标签，大括号内的部分是对该标签设置的具体样式。

上面 h1 就是选择器，意思是该页面中所有的 h1 标签文字都为红色，字体大小为 20 像素。

要点：

• 属性和属性值以“键值对”的形式出现
• 属性和属性值之间用英文 “:” 分开
• 多个“键值对”之间用英文 “;” 分开

一、标签选择器

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

p {
  color: red;
  font-size: 10px;
}

缺点：不能差异化，只能选择全部的 p 标签。

二、类选择器

如果想要差异化选择不同的标签，单独选一个或某几个标签，可以用类选择器.

<!--CSS 样式定义，前面要有'.'-->
.red {
  color: red;
}

<!--html 部分，用 class 来调用-->
<ul>
 <li class='red'>我是红色</li>
 <li>我是黑色</li>
 <li>我是黑色</li>
 <li class='red'>我也是红色</li>
</ul>
<p class='red'>我也是红色哎</p>

我们也可以使用多个类名，更方便的设置样式。在使用多个类名时，类名之间必须用空格分开。

  <div class="类名1 类名2 ...">我有很多样式</div>

在开发中，可以把一些标签相同的样式部分放到一个类里面，这些标签可以都调用这个公共的类，然后再调用自己独有的类，这样可以节省 CSS 代码，统一修改也很方便。

三、id 选择器

id 选择器的使用和类选择器很像，但 id 选择器是用 # 来定义的。

<!--CSS 样式定义，前面要有'#'-->
#only {
 color: blue;
}

<!--html 部分，用 id 来调用-->
<div id='only'>我是唯一的</div>

id 选择器在页面上只能使用一次，不常用

四、通配符选择器

通配符选择器用 * 来定义，它表示选取页面中的所有标签。通配符选择器不需要被调用，会自动给所有的标签使用样式。

通配符选择器在特殊情况下才会使用，比如清除所有标签的内外边距。

* {
  margin: 0;
  padding: 0;
}