使用空格处理css id和类

Question

我有一个段落

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

如何用css中的空格表示id和class

我用的时候

#para#one{
}

.paragraph.one{
}

它不适用于上面的CSS.

Answer 1

我自己就遇到过这个(设计一个现有的页面而无法改变id).

这就是我以前用id来设置它的样式:

p[id='para one']{
}

并且,如前所述,.paragraph.one选择两个类 - 这意味着它还将选择带class=" one paragraph"和的元素class="not a paragraph this one".

Answer 2

你的CSS类是正确的.你没有一个带空格的类,你有两个类,"段落"和"一个".您的CSS正确选择了具有这两个类的元素:

.paragraph.one { color: red; }

这是一种将元素的facet分割成可以单独组合的单独类的有用技术.另请注意,<p class="one paragraph">它将匹配相同的选择器.

Answer 3

您不能在id值或类名称中包含空格.如果class属性值中包含空格,则指定应用于该元素的多个类:

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

对于id值,规则(HTML4)声明如下:

ID和NAME令牌必须以字母([A-Za-z])开头,后面可以跟任意数量的字母,数字([0-9]),连字符(" - "),下划线("_") ,冒号(":")和句号(".").

如您所见,空格无效.在HTML5规范更leniant,但空间仍不允许的(强调):

id属性指定其元素的唯一标识符(ID).该值必须在元素的主子树中的所有ID中唯一,并且必须至少包含一个字符.该值不得包含任何空格字符.

Answer 4

class="paragraph one" 

实际上代表两个不同的类

id="para one"

不会起作用,但你最终可能会得到para的实际id

Answer 5

现代浏览器实际上支持id空格。所以在 Chrome 54 上这有效：

p#para\ one {
}

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

p[id='para one'] {
}

在 Chrome 54 中不起作用。