CSS 之 Class Selector

栏目: CSS · 发布时间: 4年前

内容简介：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

CSS 之 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，為了避免重複，所以寫在一起。

CSS 之 Class Selector

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 下。

CSS 之 Class Selector

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

以上所述就是小编给大家介绍的《CSS 之 Class Selector》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

猜你喜欢:

CSS 之 Class Selector

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

用户思维+：好产品让用户为自己尖叫

[美] Kathy Sierra / 石航 / 人民邮电出版社 / 2017-9 / 69.00元

畅销产品与普通产品的本质区别是什么？若没有巨额预算、不爱营销噱头、不开奢华的产品发布会，如何打造可持续成功的产品？本书针对上述问题提出了新颖的观点：用户并不关心产品本身有多棒，而是关心使用产品时自己有多棒。作者利用其多年的交互设计经验，生动阐释了这一观点背后的科学。可贵的是，本书并不止步于解释“为什么”，还清晰呈现了“怎么做”。本书风格活泼、图文并茂，其对话式内容既引人入胜，又引人深思，适......一起来看看《用户思维+：好产品让用户为自己尖叫》这本书的介绍吧!

码农工具

正则表达式在线测试

HSV CMYK 转换工具

HSV CMYK互换工具