4
.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 类的子类。从我用谷歌搜索的结果来看,这应该可行,但事实并非如此。如果我这样做:

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

它有效,但没有抓住重点。

4

5 回答 5

4

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

.popUp .question 

所以语法是parent space child

于 2013-09-03T08:46:12.533 回答
4

将通用样式保留在基类中,然后在子类中添加特定/覆盖的属性。

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

查看引导文档,该文档演示了在许多组件中使用子类。他们的约定似乎是在子类中包含基类名称。例如,基类alert和子类alert-success

于 2013-09-03T08:46:40.193 回答
2

反过来说,容器必须在定义中包含的元素之前:

.popUp .question
{
    width: 300px;
    height: 20px;
    border: 1px solid black;
    background-color: black;
}
于 2013-09-03T08:46:09.370 回答
1

尝试:

.popUp .question {
    ...
}
于 2013-09-03T08:45:39.537 回答
0

如果 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;
}
于 2020-12-31T10:34:11.343 回答