CSS is not selecting

Question

我的网站中有一个按钮，它正在从文件 A 中获取此 CSS。

所以这个按钮：

<form class="recurly subscribe">
...
<button type="submit" class="submit">Subscribe</button> 

由以下 CSS 设置样式：

.recurly button.submit {
height: 46px;

现在我正在尝试使用相同的 CSS 来设置不同的 HTML 元素的样式。我有从文件 A 链接到 css 的 HTML。这是 HTML

<button type="submit" class="submit recurly">Subscribe</button>

HTML 是类提交的按钮。它也是经常发生的类。所以我希望.recurly button.submit {...能捡起它。CSS 文件已链接。我错过了什么？

Answer 1

空格是后代选择器，因此.recurly尝试选择后代。 元素不是自身的后代。

您可以更新选择器：

.recurly button.submit, button.recurly.submit

这将影响作为.recurly后代的button.submit，以及按钮本身是否.recurly。 这似乎有点多余，所以你可能只想坚持一个或另一个。

Answer 2

您只需

使用以下内容：

js小提琴示例

.recurly button.submit.recurly {
    height: 46px;
}

Answer 3

当前 CSS 的设置方式是定位具有类submit的 button 元素，并且是具有类recurly的元素的子元素。如果要将同时具有 submit 和 recurly 的按钮作为其类，请使用：

button.submit.recurly {
    ...
}

或者使用逗号分隔目标，并将原始 CSS 从：

.recurly button.submit {
    ...
}

对此：

.recurly button.submit, button.submit.recurly {
    ...
}

这会将您定义的任何样式应用于两个按钮。