来源：自学PHP网 时间：2015-04-14 14:51 作者： 阅读:次
[导读] 我们有些程序猿在给一个元素(比如div)应用样式的时候，会有一些疑问，为什么我写在后面的样式不能覆盖前面的样式呢，不是说CSS是层叠样式表吗？如果你在开发中也遇到同样的问题，...
|
我们有些程序猿在给一个元素(比如div)应用样式的时候，会有一些疑问，为什么我写在后面的样式不能覆盖前面的样式呢，不是说CSS是层叠样式表吗？
如果你在开发中也遇到同样的问题，即在给某一元素应用样式的时候（比如写在外部样式表中），写在后面的样式不能覆盖前面定义的样式。这个时候，你可能就得考虑是不是没考虑优先级问题了。
当我们在给一个标签，比如div应用样式的时候，我们得考虑优先级问题。
下面列出的就是是选择器的优先级：
行内样式 > ID选择器样式 > 类别选择器样式 > 标记选择器样式
标记选择器好比一个更广泛的概念，然后到类别选择器，到ID选择器，最后到行内样式，不断的精确下去，所以越精确，优先级越高。比如下面的盒子模型：
我是标记选择器 div
我是类别选择器 .container
我是ID选择器 #article
我是行内样式 style
下面我对上面这些优先级分别作一下证明：
比如页面中有一个div标签，它有相应的id和class属性，如下所示
<div id=”article”>itdriver.cn</div>
现在我们先给它应用行内样式。
行内样式 : 也即直接应用在元素上的样式。 如 <div style=”</div>。 这个style属性其实就是行内样式。
<div id=”article” style=””>itdriver.cn</div>
这时我们的div背景就变成了黄色了。
接着我们再通过ID选择器来设置div的样式。
ID选择器：所谓ID选择器，就是我们在样式表中，通过一个#id来给元素直接应用样式，大家请看下面的代码，就是如何给一个指定ID的元素应用样式；
/*给id为article的标签应用样式 */
#article{
font-size: 0.8em;
float:right;
}
当我们运行示例的时候，会发现div的背景依然是黄色的，但是我们字体大小是按着#article来设置的(因为行内样式没有设置字体大小)。这就说明： 行内样式 > ID选择器应用的样式。
接着ID选择器的下面，我们应用class选择器样式
/*给id为article的标签应用样式 */
#article{
font-size: 0.8em;
float:right;
}
/*给所有指定container为class的标签应用样式*/
.container{
font-size: 0.5em;
border:1px solid red;
}
这是我们发现，除了给div加了个黄色边框，div的背景色依然是行内样式设置的黄色，字体大小是#article里设置的。由此我们可以发现，虽然.container写在#article下面，但是却没有覆盖已经定义过的样式，这就证明了：行内样式 > ID选择器样式 > 类选择器样式
最后再应用一个标记选择器样式
/*给id为article的标签应用样式 */
#article{
font-size: 0.8em;
float:right;
}
/*给所有指定container为class的标签应用样式*/
.container{
font-size: 0.5em;
border:1px solid red;
}
div{
font-size:1em;
border:2px solid black;
color:green;
}
我们会发现，只有字体的颜色发生了变化，其他的样式还是之前的样式，这就说明标记选择器没有覆盖前面类选择器，ID选择器以及行内已定义的样式。这也就证明了 ： 行内样式 >ID选择器 > 类选择器 > 标记选择器.我们有些程序猿在给一个元素(比如div)应用样式的时候，会有一些疑问，为什么我写在后面的样式不能覆盖前面的样式呢，不是说CSS是层叠样式表吗？
如果你在开发中也遇到同样的问题，即在给某一元素应用样式的时候（比如写在外部样式表中），写在后面的样式不能覆盖前面定义的样式。这个时候，你可能就得考虑是不是没考虑优先级问题了。
当我们在给一个标签，比如div应用样式的时候，我们得考虑优先级问题。
下面列出的就是是选择器的优先级：
行内样式 > ID选择器样式 > 类别选择器样式 > 标记选择器样式
标记选择器好比一个更广泛的概念，然后到类别选择器，到ID选择器，最后到行内样式，不断的精确下去，所以越精确，优先级越高。比如下面的盒子模型：
我是标记选择器 div
我是类别选择器 .container
我是ID选择器 #article
我是行内样式 style
下面我对上面这些优先级分别作一下证明：
比如页面中有一个div标签，它有相应的id和class属性，如下所示
<div id=”article”>itdriver.cn</div>
现在我们先给它应用行内样式。
行内样式 : 也即直接应用在元素上的样式。 如 <div style=”</div>。 这个style属性其实就是行内样式。
<div id=”article” style=””>itdriver.cn</div>
这时我们的div背景就变成了黄色了。
接着我们再通过ID选择器来设置div的样式。
ID选择器：所谓ID选择器，就是我们在样式表中，通过一个#id来给元素直接应用样式，大家请看下面的代码，就是如何给一个指定ID的元素应用样式；
/*给id为article的标签应用样式 */
#article{
font-size: 0.8em;
float:right;
}
当我们运行示例的时候，会发现div的背景依然是黄色的，但是我们字体大小是按着#article来设置的(因为行内样式没有设置字体大小)。这就说明： 行内样式 > ID选择器应用的样式。
接着ID选择器的下面，我们应用class选择器样式
/*给id为article的标签应用样式 */
#article{
font-size: 0.8em;
float:right;
}
/*给所有指定container为class的标签应用样式*/
.container{
font-size: 0.5em;
border:1px solid red;
}
这是我们发现，除了给div加了个黄色边框，div的背景色依然是行内样式设置的黄色，字体大小是#article里设置的。由此我们可以发现，虽然.container写在#article下面，但是却没有覆盖已经定义过的样式，这就证明了：行内样式 > ID选择器样式 > 类选择器样式
最后再应用一个标记选择器样式
/*给id为article的标签应用样式 */
#article{
font-size: 0.8em;
float:right;
}
/*给所有指定container为class的标签应用样式*/
.container{
font-size: 0.5em;
border:1px solid red;
}
div{
font-size:1em;
border:2px solid black;
color:green;
}
我们会发现，只有字体的颜色发生了变化，其他的样式还是之前的样式，这就说明标记选择器没有覆盖前面类选择器，ID选择器以及行内已定义的样式。这也就证明了 ： 行内样式 >ID选择器 > 类选择器 > 标记选择器.我们有些程序猿在给一个元素(比如div)应用样式的时候，会有一些疑问，为什么我写在后面的样式不能覆盖前面的样式呢，不是说CSS是层叠样式表吗？
如果你在开发中也遇到同样的问题，即在给某一元素应用样式的时候（比如写在外部样式表中），写在后面的样式不能覆盖前面定义的样式。这个时候，你可能就得考虑是不是没考虑优先级问题了。
当我们在给一个标签，比如div应用样式的时候，我们得考虑优先级问题。
下面列出的就是是选择器的优先级：
行内样式 > ID选择器样式 > 类别选择器样式 > 标记选择器样式
标记选择器好比一个更广泛的概念，然后到类别选择器，到ID选择器，最后到行内样式，不断的精确下去，所以越精确，优先级越高。比如下面的盒子模型：
我是标记选择器 div
我是类别选择器 .container
我是ID选择器 #article
我是行内样式 style
下面我对上面这些优先级分别作一下证明：
比如页面中有一个div标签，它有相应的id和class属性，如下所示
<div id=”article”>itdriver.cn</div>
现在我们先给它应用行内样式。
行内样式 : 也即直接应用在元素上的样式。 如 <div style=”</div>。 这个style属性其实就是行内样式。
<div id=”article” style=””>itdriver.cn</div>
这时我们的div背景就变成了黄色了。
接着我们再通过ID选择器来设置div的样式。
ID选择器：所谓ID选择器，就是我们在样式表中，通过一个#id来给元素直接应用样式，大家请看下面的代码，就是如何给一个指定ID的元素应用样式；
/*给id为article的标签应用样式 */
#article{
font-size: 0.8em;
float:right;
}
当我们运行示例的时候，会发现div的背景依然是黄色的，但是我们字体大小是按着#article来设置的(因为行内样式没有设置字体大小)。这就说明： 行内样式 > ID选择器应用的样式。
接着ID选择器的下面，我们应用class选择器样式
/*给id为article的标签应用样式 */
#article{
font-size: 0.8em;
float:right;
}
/*给所有指定container为class的标签应用样式*/
.container{
font-size: 0.5em;
border:1px solid red;
}
这是我们发现，除了给div加了个黄色边框，div的背景色依然是行内样式设置的黄色，字体大小是#article里设置的。由此我们可以发现，虽然.container写在#article下面，但是却没有覆盖已经定义过的样式，这就证明了：行内样式 > ID选择器样式 > 类选择器样式
最后再应用一个标记选择器样式
/*给id为article的标签应用样式 */
#article{
font-size: 0.8em;
float:right;
}
/*给所有指定container为class的标签应用样式*/
.container{
font-size: 0.5em;
border:1px solid red;
}
div{
font-size:1em;
border:2px solid black;
color:green;
}
我们会发现，只有字体的颜色发生了变化，其他的样式还是之前的样式，这就说明标记选择器没有覆盖前面类选择器，ID选择器以及行内已定义的样式。这也就证明了 ： 行内样式 >ID选择器 > 类选择器 > 标记选择器.
|
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习，以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明：本站所有视频，教程都由网友上传，站长收集和分享给大家学习使用，如由牵扯版权问题请联系站长邮箱904561283@qq.com
