<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

关注问题我要回答

1362

操作

收起

6 回答

风听柏提问者
2014-08-06

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

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

#1

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

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

#2

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

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

慕仔9151431
2022-09-02

能实现就行，不过你和题目要求还是有点差别哦~你可以在进行优化一下，没有点击的时候标签下有一条线的，你可以把这个优化掉

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

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)-升级版

参与学习 1222446 人
解答问题 18209 个

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

本课相似问答

7 回答我用id选择符，为什么会说语句没写对。

3 回答span的作用

2 回答盒子模型--边框，网页怎么不显示代码？

2 回答加了这个有什么效果吗。。不是很明白

6 回答name的用处

搜索更多本课相关问答

我要回答关注问题

意见反馈帮助中心 APP下载