CSS系列知识(1)——id、class等选择器

概要

学习本篇博客
事先阅读：
1. http://www.runoob.com/css/css-id-class.html
将会学到以下内容：
1. CSS基本选择器：id选择器、class选择器、标签选择器
2. CSS其他选择器：后代选择器、子选择器

基本选择器

标签选择器
语法：S{…}
含义：设置S标签样式

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

其他选择器

1.后代选择器
语法：A B{…}
含义：设置A标签下的B标签的样式，B标签可以是A的子代。

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

2.子选择器
语法：A>B{…}
含义：设置A标签下的B标签的样式，B标签只能是A的儿子。

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