處理CSS ID和類用空格

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

怎樣才能代表在CSS

當我使用

#para#one{ 
} 

.paragraph.one{ 
}

它的ID和類空間不符合上面的CSS。

2012-02-14 user1212

[處理的類名的可能重複空格在它的HTML]（http://stackoverflow.com/questions/9284313/handling-class-name-with-spaces-in-it-html）由同一個用戶。 – 2012-02-14 22:58:59

class="paragraph one"

實際上代表了兩種不同類型的

id="para one"

將無法正常工作，但你可能會最終不得不對

2012-02-14 22:57:24

在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中唯一，並且必須至少包含一個字符。 該值不能包含任何空格字符。

2012-02-14 22:57:17

你的課的CSS是正確的。你沒有一個有空間的班級，你有兩個班級，「段落」和「一個」。你的CSS適當選擇具有這兩個類的元素：

.paragraph.one { color: red; }

這是該元件的面分割成單獨類，可以單獨進行組合的有用技術。還請注意<p class="one paragraph">將匹配相同的選擇器。

2012-02-14 22:57:19

你根本不能有空格的實際ID。如果你使用空間，這意味着你使用了兩個不同的類。一個是para，另一個是one。

2012-02-14 22:57:51 elclanrs

剛剛遇到這個自己（造型現有的頁面沒有辦法改變id）。

這是我所使用的ID樣式是：

p[id='para one']{ 
}

而且，正如前面所說，.paragraph.one選擇兩類 - 這意味着它也將選擇和class="not a paragraph this one"元素。

2013-03-07 18:33:01 Rono

不知道爲什麼Mikey G的答案被選爲正確答案。這裏的建議非常好，可以在wordpress小部件中隱藏複雜的類名。 – David 2015-10-17 13:06:20

Upvoted，最好的答案，在Tampermonkey也很好。 – javabrett 2016-05-27 00:26:04

現代瀏覽器實際上支持空間爲id。所以在Chrome 54這個作品：

p#para\ one { 
}

和現代的瀏覽器不支持[id="..."]語法，所以

p[id='para one'] { 
}

在Chrome中不起作用54

2016-11-18 13:25:12

回答