Question

.popUp
{
    width: 300px;
    height: 300px;
    position: fixed;
    top: 0px;
    left: 0px;
    background-color: white;
}
.question .popUp
{
    width: 300px;
    height: 20px;
    border: 1px solid black;
    background-color: black;
}

正如您所看到的，我正在尝试将问题类作为popUp类的子类。从我用Google搜索，这应该工作，但事实并非如此。如果我这样做：

.question
{
    width: 300px;
    height: 20px;
    border: 1px solid black;
    background-color: black;
}

它有效，但是忽略了这一点。

Answer 1

popup类是parent容器，那么您应该选择它如下。

.popUp .question

因此语法为parent space child

Answer 2

将常用样式保留在基类中，然后在子类中添加特定/重写属性。

.popUp
{
    width: 300px;
    height: 300px;
    position: fixed;
    top: 0px;
    left: 0px;
    background-color: white;
}

.popUp-question
{
    /*width: 300px; This can move to parent */
    height: 20px;
    border: 1px solid black;
    background-color: black;
}

<强>用法

<div class="popUp popUp-question"></div>

看一下bootstrap documentation，它演示了在许多组件中使用子类。他们的约定似乎是在子类中包含基类名称。例如，基类alert和子类alert-success。

Answer 3

反过来说，容器必须位于定义中包含的元素之前：

.popUp .question
{
    width: 300px;
    height: 20px;
    border: 1px solid black;
    background-color: black;
}

Answer 4

尝试：

.popUp .question {
    ...
}

Answer 5

如果container1和container2都有子类“item”，如下所示：

<div class=container1">
    <div class="item">Item1</div>
    <div class="item">Item2</div>
</div>

<div class=container2">
    <div class="item">Item1</div>
    <div class="item">Item2</div>
</div>

您实际上可以在 CSS 中定位子类。

.container1 .item {
    color: green;
}

.container2 .item {
    color: blue;
}

CSS子类，我做得对吗？

5 个答案: