CSS3的魔法——选择器优先级

从之前的学习中,我们已经了解到了id选择器和class选择器两种基本选择器。
那么,当一个元素同时设置了class和id的情况下,设置了同一样式。
如下代码:

<p class="class" id='id1'></p>

从上述HTML片段中,我们可以看到,p标签同时设置了id和class属性
看如下CSS:

#id1{
    font-size:16px;
    background:#f00;
}
.class{
    font-size:12px;
    background:#0f0;
}

我们可以看到,id和class选择器同时对p标签指定了同样的两条属性。
那么我们生效的样式为那个呢?
答案是#id1选择器内部的样式获得胜利,并且其内部属性生效,而我们class选择器中的样式则没有生效。
这是因为CSS权重问题导致的优先级差别
优先级就是特权,优先级高的选择器中声明的CSS属性条无法被优先级低的选择器中的属性条替换掉。
那么我们CSS中的优先级顺序都是怎么样的呢?
在讨论这个问题之前,我们先来思考一下另一个问题。
看如下代码:

<div class="div" id="div_id">这是文字</div>

一个HTML元素中有几个选择器呢?
首先从之前我们的了解中,这里有class选择器和id选择器,另外我们可以看到div这个元素选择器。那么它们之间的优先级是怎么样的呢?
测试一下,现在有如下代码:

div{
    font-size:14px;
}
.div{
   font-size:24px;
}
#div_id{
   font-size:32px;
}

其结果不难猜到,答案是id选择器优先级更高,那么我们将id选择器从css代码中移除,可以看到,生效的代码为class选择器的样式。
完整的权重大小应该如下:
!important >内联样式>id>class>元素选择器>*通用选择器
先记住这条规则,在之后实践中了解各中的解释
下面列一下常用的选择器:

选择器示例示例说明
.class.info选择所有 class=”info”的元素
#id#idname选择所有id=”idname”的元素
**选择所有元素
elementp选择所有p元素
element,elementdiv,p选择所有div元素和p元素
element elementdiv p选择div元素内部的所有p元素
element>element div>p选择所有直接父级为div的p元素
:last-child div :last-child 选择其父级下最后一个div元素
:first-child div :first-child 选择其父级下第一个div元素