CSS五大选择器

一、标签选择器：

顾名思议，标签选择器是直接将HTML标签作为选择器，可以是p、h1、dl、strong等HTML标签。如：

二、id选择器：

每一个标签他都有一个共同属性id,所以我们通常给页面元素定义id。如图所示.

其中”p1”,”p2”,”p3”是你自己定义的id名称。注意在前面加”#”号。 
id选择器也同样支持后代选择器(针对嵌套标签) 如图所示:

 

三、类（class）选择器：

每一个标签同样都有一个类属性,所以在CSS里用一个点开头表示类别选择器定义，例如：

在页面中，用class=”类别名”的方法调用,这个方法比较简单灵活，可以随时根据页面需要新建和删除。但需要避免多class综合症。

四、群组选择器：

当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔。如：

下面来看(标签,id,类)群组选择器如图:

使用组群选择器，将会大大的减化CSS代码，将具有多个相同属性的元素，合并群组进行选择，定义同样的CSS属性，这大大的提高了编码效率与CSS文件体积。

五、后代选择器：

后代选择器也称作为派生选择器,通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。 
在 CSS 中，通过这种方式来应用规则的选择器被称为上下文选择器 (contextual selectors)，这是由于它们依赖于上下文关系来应用或者避免某项规则。在 CSS2 中，它们称为派生选择器，但是无论你如何称呼它们，它们的作用都是相同的。 
派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器，我们可以使 HTML 代码变得更加整洁。 
比方说，你希望列表中的 strong 元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器： 
请注意标记为  蓝色代码的上下文关系：

在上面的例子中，只有 li 元素中的 strong 元素的样式为斜体字，无需为 strong 元素定义特别的 class 或 id，代码更加简洁。

结合使用上面的五种CSS选择器，基本满足了CSS布局的需要，主要在于灵活的使用，特别是后代选择器的使用能大大的简化HTML文档，使HTML做到结构化明确，最小的代码实现同样的效果。 
选择器讲完了,我们来看看选择器的优先级.

六 、比较选择器的优先级

比较同一级别的个数，数量多的优先级高，如果相同即比较下一级别的个数 ，至于各级别的优先级，大家应该已经很清楚了，就是：

important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符 通配符 > 继承

原文链接