CSS 之 Class Selector

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

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

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

码农书籍

JavaScript快速开发工具箱

Robin Nixon / 陈武、姚飞 / 清华大学出版社 / 2011-11 / 59.00元

《JavaScript快速开发工具箱:轻松解决JavaScript日常编程问题的100个插件工具》通透讲解100个现成的JavaScript插件，引导您使用这些利器得心应手地创建动态Web内容。《JavaScript快速开发工具箱:轻松解决JavaScript日常编程问题的100个插件工具》开篇讲解JavaScript、CSS和DOM，此后每章都列举一个完整示例，指导您将特定效果快速应用于网页。使......一起来看看《JavaScript快速开发工具箱》这本书的介绍吧!

码农工具