CSS常用五类选择器

要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。

㈠什么是选择器？

每一条css样式定义由两部分组成，形式如下： [code] 选择器{样式} [/code] 在{}之前的部分就是“选择器”。

“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。

㈡CSS的五大选择器

⑴标签选择器（元素选择器）

⑵ID选择器（唯一性，一次引用）

⑶类选择器（单类选择器，多类选择器）

⑷属性选择器（简单属性选择，具体属性选择，部分属性选择， 特定属性选择）

⑸派生选择器（后代选择器(descendant selector)，子元素选择器(child selector)，相邻兄弟选择器(Adjacent sibling selector)

㈢元素选择器（标签选择器）

一个完整的HTML页面是由很多不同的标签组成。标签选择器：指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。

如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身。

例如：

html {background-color: black;}
p {font-size: 30px; backgroud-color: gray;}
h2 {background-color: red;}

以上css代码会对整个文档添加黑色背景；将所有p元素字体大小设置为30像素同时添加灰色背景；对文档中所有h2元素添加红色背景。

㈣ID 选择器

⑴ID 选择器允许以一种独立于文档元素的方式来指定样式。

⑵ID 选择器可以为标有特定 ID 的 HTML 元素指定特定的样式。 根据元素ID来选择元素，具有唯一性，这意味着同一id在同一文档页面中只能出现一次。

⑶id 选择器以 “#” 来定义。

例如：在css中，下面的两个 id 选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为黄色：

#red{color：red；}
#yellow{color：yellow；}

下面的 HTML 代码中，id 属性为 red 的 p 元素显示为红色，而 id 属性为 green 的 p 元素显示为绿色。

<p id="red">这个段落是红色。</p>

<p id="yellow">这个段落是黄色。</p>