一个 CSS 类依赖于另一个 CSS 类

Question

我知道这是一个简单的问题。

如果我两个css类：

.cssclass1 { ...some element .... }
.cssclass2 { ...some element .... } 

我想在输入字段中使用它们：

<input type="text" class="cssclass1 cssclass2" />

如何链接它，以便 cssclass2 仅在与 cssclass1 位于同一元素中时才呈现？

Answer 1

选择器写成这样：

.cssclass1.cssclass2 { ... }

。您将能够设置一个规则列表，仅当元素具有两个类时才应用这些规则。

Answer 2

纯 CSS：

.cssclass2 {
  display: none;
}
.cssclass2.cssclass1 {
  display: block;
}

SCSS：

.cssclass2 {
  display: none;
  &.cssclass1 {
    display: block;
  }
}

Answer 3

.cssclass1.cssclass2 {
    //...
}

做你想做的事情。

为了您的记录，这是：

#foo.bar

选择将 foo 作为 ID 和 bar 作为类的标签。第一个解决了您的实际问题，但了解第二个也没有什么坏处。

Answer 4

使用这个：

.cssclass1.cssclass2 { ...some element .... }