2.2 CSS基本选择器

一、基本选择器

选择器	示例
通用选择器	*{margin:0;padding:0;}
标签选择器	p{font-size:16px;}
class选择器	.info{background:#ccc;}
ID选择器(只能在页面中使用一次)	#info{background:#ccc;}

通用选择器:*

通用选择器可以选择页面上的所有元素，并对它们应用样式，用 * 来表示。

示例：

* { margin:0; padding:0;}

说明：这行代码可以删除每个元素在浏览器中margin和padding的默认值。不同的浏览器对元素的默认margin和padding可能不同，用通用选择器把所有元素的margin和padding都设置为0方便我们精确地控制元素的margin和padding。

标签选择器

标签选择器，可以选中所有的标签，比如body,div,ul,li,p,img,a等等。

示例：

img { border: 0; display: block }
li { list-style: none; }
a { text-decoration: none; color: #000; }

说明：标签选择器选中的是所有的，不是某一个，所以说这个标签选择器选中的是"共性"的属性，而不是"特性"。

class（类）选择器

.class 选择器为所有具有指定类的元素添加样式。使用.来选择具有包含特定值的类的元素。

示例：

为了将类选择器的样式与元素关联，必须将 class 指定为一个适当的值。请看下面的 HTML 代码：

<div class="navbox">
这是导航栏
</div>

在上面的代码中，div元素的 class 指定为 navbox。

然后我们使用以下语法向div元素应用样式，即类名前有一个点号（.），然后选择所有类名相同的元素：

.navbox { width: 500px; background:  #f5f5f5; }/*设置宽度500像素，背景为浅灰色*/

说明：类值的名称必须紧跟在点号（.）后面。

ID选择器

ID 选择器类似于类选择器，ID 选择器前面有一个 # 号 。

示例：

请看下面的 HTML 代码：

<div id="tab-content">
这是ID选择器的例子
</div>

在上面的代码中，div元素的 id 指定为 tab-content。

然后我们使用以下语法向div元素应用样式，即ID名前有一个井号（#）：

#tab-content { width: 50%; }/*设置宽度50%*/

说明：在一个 HTML 文档中，ID 选择器会使用一次，而且仅一次，还要注意的就是ID选择器在HTML文档中运用较少，一般是在给页面加JavaScript的时候才会用到，所以ID选择器不推荐大篇幅使用。