Question

我有一个按钮类：

.client-header button {
    /*Properties*/
}

以及用于检测菜单何时打开的类：

.client-menu-open {
    /*Properties*/
}

我想根据菜单是否打开来更改按钮背景。我想要这样的东西：

.client-header button .client-menu-open {
    /*Properties*/
}

但是这些类有两个不同的文件，所以它不起作用。有没有办法在不同的文件中执行此操作？

以下是头文件index.css的代码：

@import url('../menu/index.css');

.client-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    overflow: hidden;
    border-bottom: 1px solid #7E7E7E;
    background: #cccccc;
}

.client-header button {
    float: left;
    height: 100%;
    border: none;
    border-right: 1px solid var(--border-color);
    border-radius: 0;
    box-shadow: none;
    line-height: 39px;
    background-color: #444444;
    color: #FFF;
}

.client-header button:hover {
    background-color: #555555;
}

.client-header button:active {
    background-color: #4E4E4E;
}

.client-header-caption {
    float: left;
}

.client-header-title,
.client-header-subtitle {
    margin-left: 10px;
}

.client-header-title {
    line-height: 25px;
}

.client-header-subtitle {
    font-size: 0.5rem;
    line-height: 15px;
}

@media (min-width: 640px) {
    .client-header-title,
    .client-header-subtitle {
        display: inline-block;
        line-height: var(--header-height);
    }

    .client-header-title {
        font-size: 1.5rem;
    }

    .client-header-subtitle {
        font-size: 1rem;
    }

}

.client-header .client-menu-open button {
    background: #CCCCCC;
}

这是菜单index.css的代码：

.client-menu {
    position: absolute;
    top: var(--header-height);
    bottom: 0;
    left: -var(--menu-width);
    width: var(--menu-width);

    border-right: 1px solid var(--border-color);

    padding-bottom: var(--menu-footer-height);
    overflow: hidden;

    transition: left 0.2s;
}

.client-menu-open {
    left: 0;
    box-shadow: 0 0 30px var(--shadow-color);
    background: #444444;
}

.client-menu-pinned {
    box-shadow: none;
}

.client-menu-header {
    height: var(--menu-header-height);
    text-align: right;
    background-color: #444444;
}

.client-menu-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--menu-footer-height);

    text-align: right;
}

HTML结构是：

<header class="client-header">
    <button class="client-header-menu-toggle"/>
</header>
<div class="client-menu"/>

Answer 1

您可以像这样使用@import（在主CSS样式表中）：

@import url('external.css');

/* external.css above will be loaded */

请参阅此文档：http://www.cssnewbie.com/css-import-rule/

Answer 2

链接到其他文件和样式.client-menu-open

Answer 3

如果这是你的HTML

<div class="client-menu-open"> <!-- this class is here only if the menu gets opened, else, this div has no class -->

stuff 

stuff
<div class="client-header-button">
<button></button>
</div>

</div>

正确的语法如下

button {
    background:red;
}

.client-menu-open button {
background:blue
}

Answer 4

你的CSS选择器不正确，这就是它不起作用的原因。它与CSS样式的定义无关。

.client-header button .client-menu-open只会选择以下元素：

class="client-menu-open"
是button元素的子元素
它们本身就是class="client-header"元素的子元素

我认为，你想要的是

button元素
是具有"class=client-header" AND "class=client-menu-open"的元素的子元素。

这些元素的正确选择器为.client-header.client-menu-open button。

Answer 5

@import规则允许您在文档中包含外部样式表。这是一种在文档中创建样式表，然后将其他规则导入文档的方法。

要使用@import规则，请键入：

<style type="text/css">
 @import url("import1.css");
 @import url "import2.css";
</style>

有关详细信息，请参阅此处https://developer.mozilla.org/en-US/docs/Web/CSS/@import

从单独的文件继承CSS类？

5 个答案: