Html 如何选择带空格的班级
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/6885013/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to select classes with spaces
提问by Rails beginner
How do I select a class like class="boolean optional"
?
我如何选择一个类class="boolean optional"
?
I have tried this:
我试过这个:
.boolean optional {CSS}
.boolean_optional {CSS}
回答by BoltClock
As Zepplock says, that's actually two classes in a single attribute: boolean
and optional
. The space is not part of a class name; it acts as the separator.
正如 Zepplock 所说,这实际上是一个属性中的两个类:boolean
和optional
。空格不是类名的一部分;它充当分隔符。
These three selectors will all match it:
这三个选择器都会匹配它:
.boolean
.optional
.boolean.optional
The last selector only picks up this element as it has bothclasses.
最后一个选择器只选择这个元素,因为它有两个类。
You neverinclude a space when chaining class selectors, not even like this:
你从来没有链接类选择的时候,甚至没有像这样包括空间:
.boolean .optional
As that selects .optional
elements that are contained within separate .boolean
elements.
因为它选择.optional
包含在单独.boolean
元素中的元素。
回答by brezanac
Those are not classes with spaces :) They are called multiple class selectors.
这些不是带空格的类 :) 它们被称为多类选择器。
You basically just need to make sure all the class names are connected (no spaces between them) and separated with a dot.
你基本上只需要确保所有的类名都是连接的(它们之间没有空格)并用点分隔。
.boolean.optional {
}
回答by phihag
Spaces are not valid in class name. class="boolean optional"
means the element has the classes boolean
andoptional
, so you can match it with either .boolean
, .optional
, or if you want to match only objects that are both optional and boolean, with .boolean.optional
.
类名中的空格无效。class="boolean optional"
表示元素具有类boolean
andoptional
,因此您可以将其与.boolean
,匹配.optional
,或者如果您只想匹配既可选又是布尔值的对象,则使用.boolean.optional
.
回答by ckittel
Classes will never actually have spaces in their name. In your example, that is actually two classes; boolean
and optional
.
类的名称中实际上永远不会有空格。在您的示例中,这实际上是两个类;boolean
和optional
。
to apply style to an element that has both of those classes, the construct is
要将样式应用于具有这两个类的元素,构造是
.boolean.optional {
/* CSS */
}
However, IE6 is known to have some issues with this. See this linkfor more details on known quirks.
但是,已知 IE6 对此存在一些问题。有关已知怪癖的更多详细信息,请参阅此链接。
回答by Small Business Helper Swansea
I appreciate this was a while ago, but in case anyone's interested, something I've found handy also is, how to target/select an element within an element which has both classes... EXAMPLE
我很欣赏这是前一段时间,但如果有人感兴趣,我发现也很方便的是,如何在具有两个类的元素中定位/选择一个元素......示例
.boolean.optional > p {
color: red;
}
Perhaps requires no explanation, but: turns 'paragraph text red' ONLY for paragraph's inside of elements where both classes exist i.e.both .boolean AND .optional
也许不需要解释,但是:仅针对两个类都存在的元素的段落内部即 .boolean 和 .optional 将“段落文本红色”变为红色