浏览器在处理CSS代码时如遇到设置冲突，则按照以下优先级处理：
1.Inline styles(行内样式)；
2.Embedded styles(植入样式)；
3.Linked styles(链接样式)；
4.Imp orted styles(引入样式)；
5.Default browser styles(默认浏览器样式)。
如果同一种样式中发生冲突怎么处理？
1.本身样式的优先级高于继承的样式；
比如下面的例子中，<p>中的文字同时也继承了<body>中的样式，但是优先使用<p>中的样式，为红色。
程序代码
<html>
<style type="text/css">
<!--
body{color:blue}
p{color:red}
-->
</style>
<head>
<title>CSS</title>
</head>
<body>
<h1>Hello!</h1>
<p>Welcome to Magci's BLOG! </p>
</body>
</html>
2.重复设置样式时，优先处理最后一个设置
比如下面的例子中，<p>的样式设置了两个：红色和黄色，浏览器优先处理最后一个，即<p>中的文字为黄色。
程序代码
<html>
<style type="text/css">
<!--
p{color:red}
p{color:yellow}
-->
</style>
<head>
<title>CSS</title>
</head>
<body>
<h1>Hello!</h1>
<p>Welcome to Magci's BLOG! </p>
</body>
1.Inline styles(行内样式)；
2.Embedded styles(植入样式)；
3.Linked styles(链接样式)；
4.Imp orted styles(引入样式)；
5.Default browser styles(默认浏览器样式)。
如果同一种样式中发生冲突怎么处理？
1.本身样式的优先级高于继承的样式；
比如下面的例子中，<p>中的文字同时也继承了<body>中的样式，但是优先使用<p>中的样式，为红色。
程序代码
<html>
<style type="text/css">
<!--
body{color:blue}
p{color:red}
-->
</style>
<head>
<title>CSS</title>
</head>
<body>
<h1>Hello!</h1>
<p>Welcome to Magci's BLOG! </p>
</body>
</html>
2.重复设置样式时，优先处理最后一个设置
比如下面的例子中，<p>的样式设置了两个：红色和黄色，浏览器优先处理最后一个，即<p>中的文字为黄色。
程序代码
<html>
<style type="text/css">
<!--
p{color:red}
p{color:yellow}
-->
</style>
<head>
<title>CSS</title>
</head>
<body>
<h1>Hello!</h1>
<p>Welcome to Magci's BLOG! </p>
</body>
</html>
本文转自My_King1 51CTO博客，原文链接：http://blog.51cto.com/apprentice/1360686，如需转载请自行联系原作者
4389
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
