CSS选择器

1.ID 选择器（ID selector，IS）：使用 # 标识selector，语法格式：#S{...}（S为选择器名）。例：id为name的标签会匹配下面的样式

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

2.类选择器（class selector，CS）：使用 . 标识selector，语法格式：.S{...}（S为选择器名）。例：class属性值为value的标签会匹配下面的样式

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

3.元素选择器（element selector，ES）：又叫标签选择器，使用标签名作为selector名，语法格式：S{...}（S为选择器名）。例：所有的p标签都会匹配以下的样式

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

4.包含选择器（package selector，PS）：指定目标选择器必须处在某个选择器对应的元素内部，语法格式：A B{...}（A、B为HTML元素/标签，表示对处于A中的B标签有效）。例：以下div内的p标签和div外的p标签分别匹配不同的样式

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

5.子选择器（sub-selector，SS）：类似于PS，指定目标选择器必须处在某个选择器对应的元素内部，两者区别在于PS允许"子标签"甚至"孙子标签"及嵌套更深的标签匹配相应的样式，而SS强制指定目标选择器作为 包含选择器对应的标签 内部的标签，语法格式：A>B{...}（A、B为HTML元素/标签）。例：以下div内的p标签匹配样式，div内的table内的p不匹配

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

6.兄弟选择器（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>

 在书写CSS的时候，最先写的应该是影响整个页面布局的一些属性，然后再写布局的宽高等属性，最后再写一些可以被继承的属性，这是一种书写CSS的规范。