一个依赖于另一个的CSS类

Question

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

如果我有两个css课程：

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

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

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

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

Answer 1

使用这样的选择器：

.cssclass1.cssclass2 { ... }

...您将能够设置仅在元素具有BOTH类时才应用的规则列表。

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 .... }