CSS选择器的优先级？
<styletype="text/css">.red{font-size:14px;color:red;}p{color:blue;font-size:24px;}</s...
<style type="text/css"> .red{font-size:14px; color:red;} p{color:blue; font-size:24px;} </style>
<body>
<h1 class="red">你好</h1>
<p class="red">欢迎</p>
</body>
显示？ 展开
<body>
<h1 class="red">你好</h1>
<p class="red">欢迎</p>
</body>
显示？ 展开
7个回答
展开全部
通常我们可以将CSS的优先级由高到低分为六组：
1、无条件优先的属性只需要在属性后面使用 !important 。它会覆盖页面内任何位置定义的元素样式。当然，IE 6不支持这个属性，于是它也成为一种hack被很多人所熟知，真正使命被人淡忘。
2、第二高位的优先属性是在html中给元素标签加style。由于该方法会造成CSS的难以管理，所以不推荐使用。
3、第三级优先的属性是由一个或多个id选择器来定义的。例如 #id{margin:0;} 会覆盖 .classname{margin:3px;}。
4、第四级的属性由一个或多个 类选择器、属性选择器、伪类选择器定义。如 .classname{margin:3px;} 会覆盖 div{margin:6px;}
5、第五级由一个或多个 类型选择器定义。如 div{margin:6px;} 覆盖 *{margin:10px;} 。
最低一级的选择器是为一个通配选择器，用*{margin:10px;}这样的类型来定义。
另外，可以用一句极为简单的话来描述CSS优先级问题：当一个CSS选择器拥有更多的高级别属性时，它的优先级就会比较高。如 #i100
*.c20 *.c10{} 的优先级就会高于 #i100 *.c10 div p span em{}
，这是由于前者拥有一个第三级和两个第四级的选择器而后者第三级和第四级的选择器各为一个，当然前者优先级会比较高。
如果想学习和交流更多html 前端开发的技术 你可以来我们这个群：先写下这三个数字：432，然后在写下中间这三个数字：664，最后写下的三个数字是：883，按照这个顺序连起来，群就会出现。还有更多的技术资料，学习课程。
CSS选择器是一个非常灵活的CSS属性，优雅的使用它会使你的页面代码不再臃肿，而且还可以作为hack的妙用方法之一。
当比较多个相同级别的CSS选择器优先级时，它们定义的位置将决定一切。下面从位置上将CSS优先级由高到低分为六级：
1、位于<head/>标签里的<style/>中所定义的CSS拥有最高级的优先权。
2、第二级的优先属性由位于 <style/>标签中的 @import 引入样式表所定义。
3、第三级的优先属性由<link/>标签所引入的样式表定义。
4、第四级的优先属性由<link/>标签所引入的样式表内的 @import 导入样式表定义。
5、第五级优先的样式有用户设定。
最低级的优先权由浏览器默认。
理解了这些CSS优先级问题后，也就不必苦恼于样式定于中的此类问题了。
1、无条件优先的属性只需要在属性后面使用 !important 。它会覆盖页面内任何位置定义的元素样式。当然，IE 6不支持这个属性，于是它也成为一种hack被很多人所熟知，真正使命被人淡忘。
2、第二高位的优先属性是在html中给元素标签加style。由于该方法会造成CSS的难以管理，所以不推荐使用。
3、第三级优先的属性是由一个或多个id选择器来定义的。例如 #id{margin:0;} 会覆盖 .classname{margin:3px;}。
4、第四级的属性由一个或多个 类选择器、属性选择器、伪类选择器定义。如 .classname{margin:3px;} 会覆盖 div{margin:6px;}
5、第五级由一个或多个 类型选择器定义。如 div{margin:6px;} 覆盖 *{margin:10px;} 。
最低一级的选择器是为一个通配选择器，用*{margin:10px;}这样的类型来定义。
另外，可以用一句极为简单的话来描述CSS优先级问题：当一个CSS选择器拥有更多的高级别属性时，它的优先级就会比较高。如 #i100
*.c20 *.c10{} 的优先级就会高于 #i100 *.c10 div p span em{}
，这是由于前者拥有一个第三级和两个第四级的选择器而后者第三级和第四级的选择器各为一个，当然前者优先级会比较高。
如果想学习和交流更多html 前端开发的技术 你可以来我们这个群：先写下这三个数字：432，然后在写下中间这三个数字：664，最后写下的三个数字是：883，按照这个顺序连起来，群就会出现。还有更多的技术资料，学习课程。
CSS选择器是一个非常灵活的CSS属性，优雅的使用它会使你的页面代码不再臃肿，而且还可以作为hack的妙用方法之一。
当比较多个相同级别的CSS选择器优先级时，它们定义的位置将决定一切。下面从位置上将CSS优先级由高到低分为六级：
1、位于<head/>标签里的<style/>中所定义的CSS拥有最高级的优先权。
2、第二级的优先属性由位于 <style/>标签中的 @import 引入样式表所定义。
3、第三级的优先属性由<link/>标签所引入的样式表定义。
4、第四级的优先属性由<link/>标签所引入的样式表内的 @import 导入样式表定义。
5、第五级优先的样式有用户设定。
最低级的优先权由浏览器默认。
理解了这些CSS优先级问题后，也就不必苦恼于样式定于中的此类问题了。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你写的这段代码，p标签首先会使用.red的样式，其次是使用p标签定义的样式
就是说如果p标签里面的样式与.red重复，那么会优先使用.red的样式，如果p标签的样式在.red里面没有，那么该样式对p标签有效。也就是css的继承，比如改写写代码：
<style type="text/css">
.red{font-size:14px; color:red;}
p{color:blue; font-size:24px;text-decoration:underline} /*给p标签加一个下划线，看看效果*/
</style>
就是说如果p标签里面的样式与.red重复，那么会优先使用.red的样式，如果p标签的样式在.red里面没有，那么该样式对p标签有效。也就是css的继承，比如改写写代码：
<style type="text/css">
.red{font-size:14px; color:red;}
p{color:blue; font-size:24px;text-decoration:underline} /*给p标签加一个下划线，看看效果*/
</style>
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
优先级最高的最定是行内样式，然后就内联样式，最后就外联样式。
这三个样式定义知道不啦？
比如说<p style="font-size:48px" class="red">欢迎</p>
那最后的font-size就是48px。写在p标签里的style就叫行内样式吧。写在html head里的style叫内联样式，外联样式就是一个CSS的文件吧。我是这样理解的
这三个样式定义知道不啦？
比如说<p style="font-size:48px" class="red">欢迎</p>
那最后的font-size就是48px。写在p标签里的style就叫行内样式吧。写在html head里的style叫内联样式，外联样式就是一个CSS的文件吧。我是这样理解的
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你这段代码使用的是内部样式表来给元素添加样式,一般默认的情况下,带有!important修饰的样式具有最高优先级,其次是直接写在元素标签内的内联样式,再其次是内部或者外部样式表中的样式,然后是一些元素的默认样式,最后是通过继承得到的样式,对于id选择器和类选择器来说,id选择器的优先级高于类选择器,类选择器的优先级又高于元素名称选择器,所以在你写的这段代码里,你好和欢迎的大小都是14px,颜色都是红色,因为你好使用的是一级标题标签,你好的字体会加粗,另外,内部样式表推荐写在<head>标签内
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
标签选择器
1
对标签p应用样式，效果图如下：
2
新建一个网页a.html，复制粘贴下面的代码：
<html>
<head>
<style type="text/css">
p { color:red;}
</style>
</head>
<body >
<p id="p1">
这是一个段落，class="green"，id="p1"，设置p标签为红色
</p>
</body>
</html>
3
说明：
代码中给p标签添加了id和class，但是使用的是标签选择器p设置的样式。
END
Class类选择器
1
对类green应用样式，效果图如下：
2
修改a.html的代码，修改后如下：
<html>
<head>
<style type="text/css">
.green { color:green;}
p { color:red;}
</style>
</head>
<body >
<p id="p1">
这是一个段落，class="green"，id="p1"，设置p标签为红色
</p>
</body>
</html>
3
说明：.green { color:green;} 为类green设置字体颜色为绿色。
从代码中可以看到，.green的设置在先，p的设置在后，但是结果仍然显示的为.green的样式，这说明了类选择器的优先级大于标签选择器。
结论：类选择器优先级 > 标签选择器优先级
END
id选择器
对id为p1的标签应用样式，效果图如下：
修改a.html的代码，修改后如下：
<html>
<head>
<style type="text/css">
#p1 { color:blue;}
.green { color:green;}
p { color:red;}
</style>
</head>
<body >
<p id="p1">
这是一个段落，class="green"，id="p1"，设置p标签为红色
</p>
</body>
</html>
3
说明：#p1 { color: blue;} 把id为p1的元素字体颜色设置为蓝色。
从代码中可以看到，#p1在最前面，但是结果仍然显示的为#p1的样式，这说明了id选择器具有最高优先权。
结论：id选择器优先级 > 类选择器优先级 > 标签选择器优先级
1
对标签p应用样式，效果图如下：
2
新建一个网页a.html，复制粘贴下面的代码：
<html>
<head>
<style type="text/css">
p { color:red;}
</style>
</head>
<body >
<p id="p1">
这是一个段落，class="green"，id="p1"，设置p标签为红色
</p>
</body>
</html>
3
说明：
代码中给p标签添加了id和class，但是使用的是标签选择器p设置的样式。
END
Class类选择器
1
对类green应用样式，效果图如下：
2
修改a.html的代码，修改后如下：
<html>
<head>
<style type="text/css">
.green { color:green;}
p { color:red;}
</style>
</head>
<body >
<p id="p1">
这是一个段落，class="green"，id="p1"，设置p标签为红色
</p>
</body>
</html>
3
说明：.green { color:green;} 为类green设置字体颜色为绿色。
从代码中可以看到，.green的设置在先，p的设置在后，但是结果仍然显示的为.green的样式，这说明了类选择器的优先级大于标签选择器。
结论：类选择器优先级 > 标签选择器优先级
END
id选择器
对id为p1的标签应用样式，效果图如下：
修改a.html的代码，修改后如下：
<html>
<head>
<style type="text/css">
#p1 { color:blue;}
.green { color:green;}
p { color:red;}
</style>
</head>
<body >
<p id="p1">
这是一个段落，class="green"，id="p1"，设置p标签为红色
</p>
</body>
</html>
3
说明：#p1 { color: blue;} 把id为p1的元素字体颜色设置为蓝色。
从代码中可以看到，#p1在最前面，但是结果仍然显示的为#p1的样式，这说明了id选择器具有最高优先权。
结论：id选择器优先级 > 类选择器优先级 > 标签选择器优先级
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（5）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
