关于css中class属性多值问题

最新推荐文章于 2024-05-27 09:00:00 发布

转载最新推荐文章于 2024-05-27 09:00:00 发布 · 2.5k 阅读

14 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/WuLex

HTML5+CSS|CSS3 专栏收录该内容

159 篇文章

订阅专栏

本文深入解析CSS中不同选择器的使用方法，包括无空格、带空格和带逗号的选择器，阐述它们如何应用于HTML元素，以及在样式优先级上的区别。

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>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=
, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<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>
<div class="first2">
<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="first first1 first2">
<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>