CSS 基础选择器

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

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

选择器用于指定 CSS 样式的 HTML 标签,大括号内的部分是对该标签设置的具体样式。
上面 h1 就是选择器,意思是该页面中所有的 h1 标签文字都为红色,字体大小为 20 像素。
要点:
  • 属性和属性值以“键值对”的形式出现
  • 属性和属性值之间用英文 “:” 分开
  • 多个“键值对”之间用英文 “; ” 分开
一、标签选择器 标签选择器是指用HTML 标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的 CSS 样式。
p { color: red; font-size: 10px; }

缺点:不能差异化,只能选择全部的 p 标签。
二、类选择器 如果想要差异化选择不同的标签,单独选一个或某几个标签,可以用类选择器.
.red { color: red; }
  • 我是红色
  • 我是黑色
  • 我是黑色
  • 我也是红色
我也是红色哎

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

在开发中,可以把一些标签相同的样式部分放到一个类里面,这些标签可以都调用这个公共的类,然后再调用自己独有的类,这样可以节省 CSS 代码,统一修改也很方便。
三、id 选择器 id 选择器的使用和类选择器很像,但 id 选择器是用 # 来定义的。
#only { color: blue; }我是唯一的

id 选择器在页面上只能使用一次,不常用
四、通配符选择器 通配符选择器* 来定义,它表示选取页面中的所有标签。通配符选择器不需要被调用,会自动给所有的标签使用样式。
通配符选择器在特殊情况下才会使用,比如清除所有标签的内外边距。
* { margin: 0; padding: 0; }

    推荐阅读