使用空格处理css id和类

Question

我有一个段落

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

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

当我使用

时

#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 spec更宽松，但仍然不允许使用空格（强调添加）：

  

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

Answer 4

class="paragraph one" 

实际上代表两个不同的类

id="para one"

不起作用，但你可能最终会得到一个实际的id

Answer 5

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

p#para\ one {
}

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

p[id='para one'] {
}

在Chrome 54中不起作用。

Answer 6

你根本就没有空格。如果你使用空格，这意味着你正在使用两个不同的类。一个是para，另一个是one。