选择器

• 选择器（selector），会告诉浏览器：网页 上的哪些元素需要设置什么样的样式。
• 比如：p这个选择器就表示选择页面中的所 有的p元素，在选择器之后所设置的样式会 应用到所有的p元素上。

元素选择器

• 元素选择器（标签选择器），可以根据标 签的名字来从页面中选取指定的元素。
• 语法：
  标签名 { }
• 比如p则会选中页面中的所有p标签，h1会 选中页面中的所有h1标签。

类选择器

• 类选择器，可以根据元素的class属性值选 取元素。
• 语法：
  .className { }
• 比如.hello会选中页面所有class属性为
  hello的元素。

ID选择器

• ID选择器，可以根据元素的id属性值选取 元素。
• 语法：
  id { }
• 比如#box会选中页面中id属性值为box的 元素，和class属性不同，id属性是不能重 复的。

复合选择器（交集选择器）

• 复合选择器，可以同时使用多个选择器， 这样可以选择同时满足多个选择器的元素。
• 语法：
  – 选择器1选择器2{}
• 例如div.box1会选中页面中具有box1这个
  class的div元素。

群组选择器（并集选择器）

• 群组选择器，可以同时使用多个选择器， 多个选择器将被同时应用指定的样式。
• 语法：
  选择器1,选择器2,选择器3 { }
• 比如p,.hello,#box会同时选中页面中p元素，
  class为hello的元素，id为box的元素。

通用选择器

• 通用选择器，可以同时选中页面中的所有 元素。
• 语法：
  *{ }

标签之间的关系

• 祖先元素
  直接或间接包含后代元素的元素。
• 后代元素
  直接或间接被祖先元素包含的元素。
• 父元素
  直接包含子元素的元素。
• 子元素
  直接被父元素包含的元素。
• 兄弟元素
  拥有相同父元素的元素。

后代选择器

• 后代选择器可以根据标签的关系，为处在 元素内部的代元素设置样式。
• 语法：
  祖先元素 后代元素 后代元素 { }
• 比如p strong 会选中页面中所有的p元素 内的strong元素。

伪类和伪元素

• 有时候，你需要选择本身没有标签，但是 仍然易于识别的网页部位，比如段落首行 或鼠标滑过的连接。CSS为他们提供一些选 择器：伪类和伪元素。