常用选择器 - 元素选择器、class类 和 id

在 css 的选择器中,最常用的是元素选择器、class类选择器、id选择器。

CSS - 元素选择器

元素选择器通常是某个 HTML 元素,比如 p、h1、div,甚至可以是 html 本身。如:

p{ text-align: center; }

CSS - class类选择器

类选择器以一个点号开始,后面是用户自定义。 以下例子中,.txt 为选择器,表示 class="txt" 的 HTML 元素均为居中:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>pangugle 教程</title>
		<style>
			.txt { text-align: center; }
		</style>
	</head>
	<body>
		<p class="txt">这是一个段落。</p>
		<div class="txt">这是块元素</div>
	</body>
</html>

注:类名不要以数字开头,它无法在 Mozilla 或 Firefox 中起作用

CSS - id选择器

id 选择器以 # 开始,后面为用户自定义。id 选择器具有唯一性。在同一个页面,一个id只能给一个元素定义。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>pangugle 教程</title>
		<style>
			#bgcl { background-color:yellow; }
		</style>
	</head>
	<body>
		<p id="bgcl">这是一个段落。</p>
	</body>
</html>

注:id 名不要以数字开头,数字开头的id在 Mozilla 或 Firefox 浏览器中不起作用。

CSS - 通配符选择器

* 为通配符选择器。以下实例表示所有元素文本水平居中:

*{ text-align: center; }