CSS 选择器

一、什么是 CSS 选择器

CSS 语法由选择器和声明组成，选择器定义需要改变样式的 HTML 元素，声明定义要设置的样式，声明由一个属性和一个值组成

选择器有多种分类：派生选择器、id 选择器、类选择器、属性选择器等等

• 派生选择器

派生选择器也称为上下文选择器，通过依据元素在其位置的上下文关系来定义样式。如下例子，如果我们定义了一个 h2 选择器，那么整个 HTML 中所有的 h2 元素都会设置成红色字体；如果我们定义 p h2 选择器，则会对只有 p 元素包含的的 h2 元素才会被设置成红色，通过这种方式来应用规则的选择器被称为派生选择器/上下文选择器

h2 { ????color: red; ????}

p h2 { ????color: red; ????}

• id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式，id 选择器以 “#” 来定义。如下例子，我们先定义两个 id 选择器，id 名分别为 a 和 b ，然后在 HTML 元素中指定要应用哪个 id 名所对应的样式，通过这种方式来应用规则的选择器被称为 id 选择器。

#a {color:red;}#b {color:green;}

<p id="a">这个段落是红色</p><p id="b">这个段落是绿色</p>

id 选择器我们通常用于建立派生选择器，如下例子中，#sidebar p 表示只有 id="sidebar" 的 p 元素才会应用这个 id 选择器

#sidebar p { ???font-style: italic; ???text-align: right; ???margin-top: 0.5em; ???}

<p> Hello World </p> ???????????????????# 这个段落不会应用id选择器<p id="sidebar"> Hello World </p> ??????# 这个段落会应用id选择器

• 类选择器