CSS的选择器

平常有做一些简单网页的需求，以前一直只是单纯了解了HTML，在HTML里去定义格式已经落伍啦，了解一下CSS很有必要。（这里只是简单的应用）

1.ID 选择器（ID selector，IS）：使用 # 标识selector。例：

<style>
#name{
  color:red;
}
</style>
<!--下面文字是红色的-->
<p id="name">red text</p>

2.类选择器（class selector，CS）：使用 . 标识selector。例：

<style>
.value{
  text-align:center;
}
</style>
<!--下面的文字是居中对齐的-->
<p class="value">center text</p>

3.元素选择器（element selector，ES）：又叫标签选择器，使用html的标签作为selector，例：

<style>
p{
  font-style:italic;
}
</style>
<!--下面的文字是斜体的-->
<p style="font-style:italic">italic text</p>

4.属性选择器（attribute selector，AS）：是ES的加强版，平常用不着，不过多介绍。

5.包含选择器（package selector，PS）：指定目标选择器必须处在某个选择器对应的元素内部，语法格式：A B{…}（A、B为HTML元素/标签，表示对处于A中的B标签有效）。例：

<style>
p{
  color:red;
}
div p{
  color:yellow;
}
</style>
<p>red text</p><!--文字是红色的-->
<div>
  <p>yellow text</p><!--文字是黄色的-->
</div>

6.子选择器（sub-selector，SS）：类似于上一个，指定目标选择器必须处在某个选择器对应的元素内部，两者区别在于：
- PS允许”子标签”甚至”孙子标签”及嵌套更深的标签匹配相应的样式。
- 而S强制指定紧挨着的里面一层标签进行匹配。
语法格式：A>B{…}（A、B为HTML元素/标签）。例：

<style>
div>p{
  color:red;
}
</style>
<div>
  <p>red text</p><!--文字是红色的-->
  <table>
    <tr>
      <td>
        <p>no red text;</p><!--文字是非红色的-->
      </td>
    </tr>
  </table>
</div>

7.兄弟选择器（brother selector，BS）：BS是CSS3.0新增的一个选择器，语法格式：A~B{…}（A、B为HTML元素/标签，表示A标签匹配selector的A，B标签匹配selector的B时，B标签匹配样式），简单来说，就是两个标签并列的时候，第二个标签的样式。

<style>
div~p{
  color:red;
}
</style>
<div>
  <p>no red text</p><!--文字是非红色的-->
  <div>no red text</div>
  <p>red text</p><!--文字是红色的-->
</div>