關於css中class屬性多值問題（親測，各類狀況，附詳細代碼）
css中幾種狀況：
1、.class之間沒有空格
/*這樣寫之間沒有空格表示有個class屬性是這樣寫的 class="first first1 first2"
而且這樣寫，優先級高於下面直接寫單個例如.first2{} ，雖然位置在.first2{}上面*/
.first.first1.first2 {
color: red;
font-family: 'Times New Roman', Times, serif
}
.first2 {
color: gray
}
2、.class之間有空格
/*這樣寫之間帶着空格表示class=first的對象的子對象中class=sec的子對象中class=third的樣式*/
.first .sec .third {
color: yellowgreen;
font-size: 40px;
font-family: 'Times New Roman', Times, serif
}
2、.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>
相關文章
- 1. 關於java的String的編碼的各類狀況測試代碼
- 2. linux中各類由於DNS問題引發的慢的狀況
- 3. 關於 css中box屬性
- 4. typescript 關於class屬性類型定義被屬性默認值覆蓋的問題及解決方式
- 5. CSS屬性不同情況下的值
- 6. 關於各類居中問題
- 7. 關於css屬性text-align：center居中的問題
- 8. 關於transform屬性的詳細介紹
- 9. 各類排序算法詳細代碼
- 10. 詳解 CSS 屬性 - 優先級問題
- 更多相關文章...
- • HTTP狀態碼 - HTTP 教程
- • C# 類（Class） - C#教程
- • Scala 中文亂碼解決
- • IntelliJ IDEA中SpringBoot properties文件不能自動提示問題解決
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
