CSS选择器(一)

常用的CSS选择器主要有三种：

• 元素选择器
• 类选择器
• ID选择器

元素选择器

定义：以HTML标签（又叫HTML元素）作为目标的选择器
作用：改变某类元素的默认样式
当我们设置一个元素的color为一个值的时候，他所有子元素的color都会变成这个值。如：
CSS代码：

div {
    color: red;
}

HTML代码：

<div>
    <h1>我在div里</h1>
    <h2>我在div里</h2>
</div>
<p>我在div外</p>

执行效果如图：

div.png

类选择器

类选择器是独立于HTML元素来指定样式的选择器，形如：

.warning{
    color: red;
}

通过class属性，将这个类与HTML元素关联在一起

<h1 class="warning">我是警告标题</h1>

<p class="warning">我是警告内容</p>

我们期望类选择器是适用于所有元素的时候,有两种表示方式：

• 不加任何前缀
  .warning{ color: red; }
• 加一个 * 的前缀

*.warning{
 color: red;
 }

以 * 为前缀的选择器又称为通配选择器。

注意：
类选择器大小写敏感，在CSS传统中几乎所有单词大都使用小写。
类选择器也不支持空格，如有多个单词组成类名，单词间一般使用"-"链接，比如 .warning-title

ID选择器

ID 选择器前面有一个 # 号，形如：

#warning-title {
    font-weight: bold;
}

ID对应着HTML标签的ID属性
<h1 id="warning-title">这是一个警告标题</h1>
注意：ID选择器也是大小写敏感的，而且也不支持空格，相关原则与类选择器一样

CSS选择器用法示例：

• 后代选择器，其实是一种表达式的写法，当两个选择器用空格分开的时候， 表示第一个选择器命中的元素下被第二个选择器命中的任何一级子元素。例如：

article p{
    border:thin black solid;
}

详见demo03

• 类选择器也是可以跟后代选择器协同使用的

article p.abstract{
    border:thin black solid;
}

详见demo04

• 元素选择器还可以跟类选择器协同使用

p.highlight{
    border:thin black solid;
}

详见demo05

• id选择器，把链接的基本样式改掉。

#w3c-link{
    border:thin black solid;
    color:black;
    text-decoration:none
}

详见demo06

• 我们通过组合选择器，复用CSS代码。
  所谓组合选择器，就是将两个选择器以“,　”分割，表示两个完全不相关的选择器命中的元素，都适用于后面的css属性。

#w3c-link, .highlight{
    border:thin black solid;
}

详见demo07
代码点这里