处理 css id 和带有空格的类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9285451/
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
handling css id and classes with spaces
提问by user1212
I have a paragraph as
我有一个段落作为
<p id="para one" class="paragraph one">Content</p>
How does one represent the id and class with spaces in the css
如何在css中用空格表示id和class
When I use
当我使用
#para#one{
}
.paragraph.one{
}
It does not work with the css above.
它不适用于上面的 css。
采纳答案by Mikey G
class="paragraph one"
actually represents two different classes
实际上代表两个不同的类
id="para one"
won't work, but you'll probably end up having an actual id of para
行不通，但您可能最终会获得 para 的实际 ID
回答by Rono
Just came across this one myself (styling an existing page with no way to change the id).
我自己刚刚遇到了这个（设计一个现有页面而无法更改 id）。
This is what I used to style it by id:
这是我用来通过 id 设置样式的内容：
p[id='para one']{
}
And, as said previously, .paragraph.oneselects two classes - this means it will also select elements with class=" one paragraph"and class="not a paragraph this one".
并且，如前所述，.paragraph.one选择两个类 - 这意味着它还将选择带有class=" one paragraph"和 的元素class="not a paragraph this one"。
回答by Ned Batchelder
Your class CSS is correct. You don't have a class with a space in it, you have two classes, "paragraph" and "one". Your CSS properly selects elements that have both of those classes:
你的类 CSS 是正确的。你没有一个带有空格的类，你有两个类，“段落”和“一个”。您的 CSS 会正确选择具有这两个类的元素：
.paragraph.one { color: red; }
This is a useful technique for splitting out facets of the element into separate classes that can be combined individually. Note also that <p class="one paragraph">will match the same selector.
这是将元素的各个方面拆分为可以单独组合的单独类的有用技术。另请注意，这<p class="one paragraph">将匹配相同的选择器。
回答by James Allardice
You can't have spaces in idvalues or class names. When you have spaces in the value of the classattribute it specifies multiple classes that apply to that element:
id值或类名中不能有空格。当class属性值中有空格时，它指定了适用于该元素的多个类：
<p class="paragraph one"> <!--Has both "paragraph" and "one" class-->
As for idvalues, the rules (HTML4) state the following:
至于id值，规则 (HTML4) 声明如下：
ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").
ID 和 NAME 标记必须以字母 ([A-Za-z]) 开头，后面可以跟任意数量的字母、数字 ([0-9])、连字符 ("-")、下划线 ("_") 、冒号 (":") 和句点 (".")。
As you can see, spaces are not valid. The HTML5 specis more leniant, but spaces are still not allowed (emphasis added):
如您所见，空格无效。在HTML5规范更leniant，但空间仍不允许的（强调）：
The id attribute specifies its element's unique identifier (ID). The value must be unique amongst all the IDs in the element's home subtree and must contain at least one character. The value must not contain any space characters.
id 属性指定其元素的唯一标识符 (ID)。该值在元素的主子树中的所有 ID 中必须是唯一的，并且必须至少包含一个字符。该值不得包含任何空格字符。
回答by Adi Fairbank
Modern browsers actually support idwith spaces. So on Chrome 54 this works:
现代浏览器实际上支持id空格。所以在 Chrome 54 上这有效：
p#para\ one {
}
And modern browsers do not support the [id="..."]syntax, so
而且现代浏览器不支持[id="..."]语法，所以
p[id='para one'] {
}
does not work in Chrome 54.
在 Chrome 54 中不起作用。
回答by elclanrs
You simply can't have spaces. If you use a space it means you're using two different classes. One is paraand the other one is one.
你根本不能有空格。如果您使用空格，则意味着您正在使用两个不同的类。一个是para，另一个是one。
