处理CSS ID和类用空格

Question

我有一个段落

<p id="para one" class="paragraph one">Content</p> 

怎样才能代表在CSS

当我使用

#para#one{ 
} 

.paragraph.one{ 
} 

它的ID和类空间不符合上面的CSS。

Answer 1

class="paragraph one" 

实际上代表了两种不同类型的

id="para one" 

将无法​​正常工作，但你可能会最终不得不对

Answer 2

在id值或类名称中不能有空格。当你在class的值有空格属性它指定适用于该元件的多个类：

<p class="paragraph one"> <!--Has both "paragraph" and "one" class--> 

至于id值，规则（HTML4）声明如下：

ID和名称标记必须以字母（[A-Za-z]）开头，可以是 ，后跟任意数量的字母，数字（[0-9]），连字符（“ - ”）， 下划线（“_”） ，冒号（“：”）和句点（“。”）。

正如您所看到的，空格无效。 HTML5 spec更宽松，但仍不允许空格（强调添加）：

id属性指定其元素的唯一标识符（ID）。 值必须在元素的主子树 中的所有ID中唯一，并且必须至少包含一个字符。 该值不能包含 任何空格字符。

Answer 3

你的课的CSS是正确的。你没有一个有空间的班级，你有两个班级，“段落”和“一个”。你的CSS适当选择具有这两个类的元素：

.paragraph.one { color: red; } 

这是该元件的面分割成单独类，可以单独进行组合的有用技术。还请注意<p class="one paragraph">将匹配相同的选择器。

Answer 4

你根本不能有空格的实际ID。如果你使用空间，这意味着你使用了两个不同的类。一个是para，另一个是one。

Answer 5

刚刚遇到这个自己（造型现有的页面没有办法改变id）。

这是我所使用的ID样式是：

p[id='para one']{ 
} 

而且，正如前面所说，.paragraph.one选择两类 - 这意味着它也将选择​​和class="not a paragraph this one"元素。

Answer 6

现代浏览器实际上支持空间为id。所以在Chrome 54这个作品：

p#para\ one { 
} 

和现代的浏览器不支持[id="..."]语法，所以

p[id='para one'] { 
} 

在Chrome中不起作用54