css - 选择具有特定 id 且属于类的元素的正确方法是什么

Question

就我而言，我有一个 class="fusion-module rt-center" 和一个#modlgn-remember。当#modlgn-remember 也是类 fusion-module rt-center 时，如何指定它来创建规则？

我会想这样的事情，但它不起作用：

.fusion-module rt-center #modlgn-remember {
xxx:xx;
xxx:xx;
}

Answer 1

#modlgn-remember.fusion-module.rt-center { ... }

空格用于后代选择器，因此您的原始选择器将选择位于 a#modlgn-remember内的rt-center元素（此处缺少点）内的元素.fusion-module。

另外，考虑重新考虑你的风格规则。页面上只能有一个带有 IDmodlgn-remember的元素，因此在规则中添加类限定符似乎是多余的。

Answer 2

您需要将各种选择器链接在一起：

#modlgn-remember.fusion-module.rt-center

这将搜索具有和id="modlgn-remember类的元素。fusion-module rt-center

CSS 选择器中的空格意味着一个后代元素，因此您的原始选择器 ( .fusion-module rt-center #modlgn-remember) 会查找位于元素id="modlgn-remember"内的rt-center元素，即位于 的元素内的元素class="modlgn-remember"。

显然，您的原始选择器不太可能返回您正在寻找的元素。

当然，请记住，anid在文档中是唯一的；因此，如果您只想获取该特定元素，则id只需使用id. id将选择器与类选择器耦合的唯一原因是id 只有当它也有这些类时才选择它。这在 JavaScript 中通常很有用，尤其是。

Answer 3

尝试这个：

#modlbn-remember.fusion-module.rt-center {
   ...
}

选择具有该 id 的元素，并且必须分配两个类。

如果您想选择它，如果其中至少一个被分配使用：

#modlbn-remember.fusion-module,
#modlbn-remember.rt-center {
   ...
}