关于css中class属性多值问题（亲测，各种情况，附详细代码）

最新推荐文章于 2024-06-19 13:24:57 发布

转载最新推荐文章于 2024-06-19 13:24:57 发布 · 648 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lixianfu5005/p/9022686.html

本文介绍了CSS中不同选择器的应用方式，包括无空格、带空格及带逗号的选择器，解析了它们的作用范围和优先级，并通过实例展示了如何在HTML文档中应用这些选择器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css中几种情况：

一、.class之间没有空格

/*这样写之间没有空格表示有个class属性是这样写的 class="first first1 first2"

并且这样写，优先级高于下面直接写单个例如.first2{} ，虽然位置在.first2{}上面*/

.first.first1.first2 {

color: red;

font-family: 'Times New Roman', Times, serif

}

.first2 {

color: gray

}

二、.class之间有空格

/*这样写之间带着空格表示class=first的对象的子对象中class=sec的子对象中class=third的样式*/

.first .sec .third {

color: yellowgreen;

font-size: 40px;

font-family: 'Times New Roman', Times, serif

}

二、.class之间有逗号

/*这样写有逗号，表示多个class同时共用这些属性，只是合在一块写*/

.first,

.first1,

.first2 {

border: 1px solid black;

color: blueviolet;

font-family: 'Times New Roman', Times, serif

}

/*------下面是详细案例，直接copy测试即可--------------------------*/

<!DOCTYPE html>

<head>

, initial-scale=1.0">

<title>Document</title>

<style>

/*这样写之间没有空格表示有个class属性是这样写的 class="first first1 first2"

并且这样写，优先级高于下面直接写单个例如.first2{} */

.first.first1.first2 {

color: red;

font-family: 'Times New Roman', Times, serif

}

/*这样写有逗号，表示多个class同时共用这些属性，只是合在一块写

同时这样写把上面的.first2属性覆盖了。*/

.first,

.first1,

.first2 {

border: 1px solid black;

color: blueviolet;

font-family: 'Times New Roman', Times, serif

}

.first2 {

color: gray

}

/*这样写之间带着空格表示class=first的对象的子对象中class=child的样式

或者 class="first"的对象的子对象中class=child的样式*/

.first .child,

.first .sec {

color: red;

font-family: 'Times New Roman', Times, serif

}

/*这样写之间带着空格表示class=first的对象的子对象中class=sec的子对象中class=third的样式*/

.first .sec .third {

color: yellowgreen;

font-size: 40px;

font-family: 'Times New Roman', Times, serif

}

</style>

</head>

<body>

<div class="first">first,我是一大段

<h1 class="sec">我是div的子对象h1<span class="third">我是div中子对象h1的子对象span，font-size：40样式</span></h1>

正常文字正常文字正常文字正常文字

<p class="child">我是div的子对象p</p> 正常文字正常文字正常文字

</div>

<div class="first1">first1,我是一大段

<h1 class="sec">我是div的子对象h1<span class="third">我是div中子对象h1的子对象span，font-size：40样式</span></h1>

正常文字正常文字正常文字正常文字

<p class="child">我是div的子对象p</p> 正常文字正常文字正常文字</div>

<h1 class="sec">我是div的子对象h1<span class="third">我是div中子对象h1的子对象span，font-size：40样式</span></h1>

正常文字正常文字正常文字正常文字

<p class="child">我是div的子对象p</p> 正常文字正常文字正常文字</div>

<h1 class="sec">我是div的子对象h1<span class="third">我是div中子对象h1的子对象span，font-size：40样式</span></h1>

正常文字正常文字正常文字正常文字

<p class="child">我是div的子对象p</p> 正常文字正常文字正常文字</div>

</body>

</html>

转载于:https://www.cnblogs.com/lixianfu5005/p/9022686.html