本文详细解析了HTML中class属性的使用方式及其对页面样式的影响。通过三个具体案例，展示了在同一标签内第一个class与非同一标签内的class如何分别生效，并在点击事件触发时的不同行为。了解这些细节有助于更灵活地运用CSS进行网页布局与样式控制。
class属性：
规定元素的一个或多个类名（引用样式表中的类）。
如下案例：
1.
<script type="text/javascript" src="js/jquery-1.6.min.js"></script>
<script>
function getHidden() {
$(".123").html("aaaaaaa");
}
</script>
<style type="text/css">
.123 {background-color: red}
</style>
<body>
<div class="123" class="234" onclick="getHidden()">34353453</div>
</body>
在页面加载时div为红色，点击div时内容变为aaaaaaa。
2.
<script type="text/javascript" src="js/jquery-1.6.min.js"></script>
<script>
function getHidden() {
$(".123").html("aaaaaaa");
}
</script>
<style type="text/css">
.123 {background-color: red}
</style>
<body>
<div class="234" class="123" onclick="getHidden()">34353453</div>
</body>
在页面加载时div不为红色，点击div时内容不变。
3.
<script type="text/javascript" src="js/jquery-1.6.min.js"></script>
<script>
function getHidden() {
$(".123").html("aaaaaaa");
}
</script>
<style type="text/css">
.123 {background-color: red}
</style>
<body>
<div class="123"onclick="getHidden()">34353453</div>
<div class="123">3333333</div>
</body>
在页面加载时2个div都变红，点击第一个div，2个div的内容都变化为aaaaaaa。
总结上面的案例：
jquery和css都是一样的：在同一个标签里第一个class是有效的。在不是同一个标签的class都是有效的。
扫一扫
753
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
