1. CSS元素选择器/类型选择器
1.1. 元素选择器匹配文档语言元素的名称。元素选择器匹配文档树中该元素名称的每一个实例。
1.2. 最常见的CSS选择器是元素选择器。换句话说, 文档的元素就是最基本的选择器。
1.3. 在W3C标准中, 元素选择器又称为类型选择器(type selector)。
2. 如果设置html的样式, 选择器通常将是某个html元素, 比如: p、h1、em、a, 甚至可以是html本身:
<!DOCTYPE html>
<html><head><title>CSS 元素选择器</title><meta charset="utf-8"><style type="text/css">html {color: red;}h1 {color: blue;}h2 {color: silver;}</style></head><body><h1>这是 heading 1</h1><h2>这是 heading 2</h2><p>这是一段普通的段落。</p></body>
</html>3. 继承及其问题
3.1. 根据CSS, 子元素从父元素继承属性。但是它并不总是按此方式工作。看看下面这条规则:
body {font-family: Verdana, sans-serif;}3.2. 根据上面这条规则, 站点的body元素将使用Verdana字体(假如访问者的系统中存在该字体的话)。
3.3. 通过CSS继承, 子元素将继承最高级元素(在本例中是 body)所拥有的属性(这些子元素诸如: p, td, ul, ol, ul, li, dl, dt和dd)。不需要另外的规则, 所有body的子元素都应该显示Verdana字体, 子元素的子元素也一样。并且在大部分的现代浏览器中, 也确实是这样的。
4. 声明分组
4.1. 我们既可以对选择器进行分组, 也可以对声明分组。
4.2. 假设您希望所有h1元素都有红色背景, 并使用28像素高的Verdana字体显示为蓝色文本, 可以写以下样式:
h1 {font: 28px Verdana;}
h1 {color: blue;}
h1 {background: red;}4.3. 但是上面这种做法的效率并不高。尤其是当我们为一个有多个样式的元素创建这样一个列表时会很麻烦。相反, 我们可以将声明分组在一起:
h1 {font: 28px Verdana;color: blue;background: red;
}