内容简介：Class Selector 為 CSS 最常用的 Selector，實務上常看到幾種寫法：CCS 319 行
Class Selector 為 CSS 最常用的 Selector，實務上常看到幾種寫法： .box1, box2 ， .box1 .box2 與 .box1.box2 ，因為很像，因此很容易誤會其意義。
Version
CCS 3
Class Selector
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Class Selector</title>
<style>
.box1 {
font-size: 30px;
color: #ff0000;
}
.box2 {
font-size: 30px;
color: #ff0000;
}
</style>
</head>
<body>
<div class="box1">Box 1</div>
<div class="box2">Box 2</div>
</body>
</html>
19 行
<div class="box1">Box 1</div>
HTML 部分有 <div> ，以 class attribute 使用 box1 class。
第 7 行
.box1 {
font-size: 30px;
color: #ff0000;
}
.box2 {
font-size: 30px;
color: #ff0000;
}
既然 <div> 使用了 box1 class，CSS 部分若要以 class selector 描述 <div> ，selector 為 . + class 名稱 。
每個 class 各自描述，這是最基本，也最不會搞混的寫法。
Class selector 可套用在多個 HTML element，沒有 side effect，重複使用程度最高，還可以透過多個 class 組合 CSS property，實務上使用最多的是 class selector
Grouping Selector
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Grouping Selector</title>
<style>
.box1,
.box2 {
font-size: 30px;
color: #ff0000;
}
</style>
</head>
<body>
<div class="box1">Box 1</div>
<div class="box2">Box 2</div>
</body>
</html>
第 7 行
.box1,
.box2 {
font-size: 30px;
color: #ff0000;
}
class 之間以 , 隔開，表示這兩個 class 共用相同的 property，為了避免重複，所以寫在一起。
Descendant Combinator
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Descendant Combinator</title>
<style>
.box1 .box2 {
font-size: 30px;
color: #ff0000;
}
</style>
</head>
<body>
<div class="box1">
Box 1
<div class="box2">Box 2</div>
<div class="box3">Box 3
<div class="box2">Box 2</div>
</div>
</div>
</body>
</html>
第 7 行
.box1 .box2 {
font-size: 120%;
color: #ff0000;
}
Class 之間以 空白 隔開，表示 box1 下所有 box2 均受影響。
因此 box3 下的 box2 也會受影響， 因為都在 box1 下。
Multiple Class Selector
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Class Selector 1</title>
<style>
.box1.box2 {
font-size: 120%;
color: #ff0000;
}
</style>
</head>
<body>
<div class="box1 box2">
Box 1 Box 2
</div>
<div class="box1">
Box 1
<div class="box2">
Box 2
</div>
</div>
<div class="box2">
Box 2
</div>
</body>
</html>
第 7 行
.box1.box2 {
font-size: 120%;
color: #ff0000;
}
Class 之間直接連在一起，表示當 box1 與 box2 組合 在一起時才會受影響。
以上所述就是小编给大家介绍的《CSS 之 Class Selector》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
