Question

我是css的新手，但从来没有遇到像这样的代码，任何人都可以告诉我这段代码究竟意味着什么。

.icon.active {
    fill: $active;
}

Answer 1

.classname.active是sequence of simple selectors，其中包含

universal selector *，省略
simple class selector .classname
simple class selector .active

因此，它会选择所有具有类classname和类active的元素。

来自CSS2.1 spec，

例如，以下规则匹配任何“类”的P元素已为属性分配了一个空格分隔值列表包括“田园”和“海洋”：
p.marine.pastoral { color: green }

Answer 2

这意味着具有两个类的元素。

例如：

<i class="icon active"></i>

此规则仅适用于具有两个类的元素。

＆＃13;

.icon.active {
  color: red;
  font-weight: bold;
  }

＆＃13;

<p class="icon active">Hello</p>

<p class="icon">Hello</p>

＆＃13;

Answer 3

这意味着该元素有多个类。它定位的是.icon，其类值中包含.active。它将继承.icon类中的属性以及.active（如果有）。

＆＃13;

.icon {
  background: lightgray;
  color: black;
  width: 200px;
  padding: 5px;
}
.active {
  background: tomato;
}
.icon.active {
  /* Inherits all the properties from .icon class and .active class */
  font-size: 0.75em;
}

＆＃13;

<div class="icon">I am an icon but not active</div>
<br>
<div class="icon active">I am an icon as well as active. So I am lightweight.</div>

＆＃13;

什么是＆＃34; .classname.active＆＃34;用css表示？

3 个答案: