<span class="bigsize...-慕课网

                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /初识HTML(5)+CSS(3)-升级版

<span class="bigsize stress">胆小如鼠</span> 与 <span class="stress bigsize">胆小如鼠</span>效果一样

生效顺序与css中样式价值顺序有关，与class list中顺序无关

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>css</title>
<style type="text/css">
.colorred{color:red;}
.colorgreen{color:green;}
</style>
</head>
<body>
<p><span class="colorred colorgreen">colorred colorgreen</span></p>
<p><span class="colorgreen colorred">colorgreen colorred</span></p>
</body>
</html>

执行下这个代码就知道了，都是green的

风听柏

2014-08-05

源自：初识HTML(5)+CSS(3)-升级版 8-5

关注问题我要回答

1399

操作

收起

5 回答

风听柏提问者
2014-08-06

你的回答是完全错误的，你自己试试就知道了，永远是css顺序中后面的".bigsize"的生效，显示red

1 回复有任何疑惑可以回复我~

#1

貌似实际运用中这种想法没什么意义

2014-09-05 回复有任何疑惑可以回复我~

#2

我用dw试了下，都是显示绿色。。。

2014-09-05 回复有任何疑惑可以回复我~

puffbaby
2015-06-16

这个案例很经典，一个元素有2个CLASS，而且CLASS有相同属性的时候，属性值由最后一个决定“就近原则”

0 回复有任何疑惑可以回复我~

多看看会知道更多惹ლ(╹◡╹ლ)

0 回复有任何疑惑可以回复我~

风听柏提问者
2014-08-06

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>css</title>
<style type="text/css">
.colorred{color:red;}
.colorgreen{color:green;}
</style>
</head>
<body>
<p><span class="colorred colorgreen">colorred colorgreen</span></p>
<p><span class="colorgreen colorred">colorgreen colorred</span></p>
</body>
</html>

执行下这个代码就知道了，都是green的

1 回复有任何疑惑可以回复我~

purple_yao
2014-08-06

亲，是这样的，但是记住，如果stress与bigsize中有设置相同的css样式属性，如.stress{color:red;}.bigsize{color:green;},后面的会覆盖前面的，

<span class="bigsize stress">胆小如鼠</span>就会显示red

<span class="stress bigsize">胆小如鼠</span>就会显示green

0 回复有任何疑惑可以回复我~

#1

风听柏提问者

你的说法是错误的，看我的回复

2014-08-06 回复有任何疑惑可以回复我~

#2

都显示绿色

2014-09-05 回复有任何疑惑可以回复我~

#3

应该根据style里面的属性定义，用最后面的属性覆盖前面的

2014-09-05 回复有任何疑惑可以回复我~

查看1条回复

举报

0/150

提交

取消

初识HTML(5)+CSS(3)-升级版

参与学习 1226801 人
解答问题 18245 个

HTML(5)+CSS(3)基础教程8小时带领大家步步深入学习标签用法和意义

本课相似问答

5 回答我不太清楚我这里哪里有错误

2 回答写代码出现红叉

4 回答添加font-size:20px;不通过

1 回答语义化的第二条作用

1 回答课程中这段话不明白

搜索更多本课相关问答

我要回答关注问题

意见反馈帮助中心 APP下载