Обработка css id и классов с пробелами

Ответ 1

class="paragraph one" 

фактически представляет два разных класса

id="para one"

не будет работать, но вы, вероятно, получите фактический идентификатор para

Ответ 2

Просто наткнулся на это сам (стилю существующей страницы без возможности изменить идентификатор).

Это то, что я использовал для стилей по id:

p[id='para one']{
}

И, как было сказано ранее, .paragraph.one выбирает два класса - это означает, что он также будет выбирать элементы с class=" one paragraph" и class="not a paragraph this one".

Ответ 3

Ваш класс CSS правильный. У вас нет класса с пробелом в нем, у вас есть два класса: "абзац" и "один". Ваш CSS правильно выбирает элементы, которые имеют оба этих класса:

.paragraph.one { color: red; }

Это полезный метод разделения граней элемента на отдельные классы, которые можно комбинировать индивидуально. Также обратите внимание, что <p class="one paragraph"> будет соответствовать одному и тому же селектору.

Ответ 4

Вы не можете иметь пробелы в значениях id или имена классов. Когда у вас есть пробелы в значении атрибута class, он указывает несколько классов, которые применяются к этому элементу:

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

Что касается значений id, то в правилах (HTML4) указывается следующее:

Идентификаторы ID и NAME должны начинаться с буквы ([A-Za-z]) и могут быть за которым следует любое количество букв, цифр ([0-9]), дефис ( "-" ), подчеркивания ( "_" ), двоеточия ( ":" ) и периоды ( "." ).

Как вы можете видеть, пробелы недействительны. спецификация HTML5 более слабая, но пробелы по-прежнему не разрешены (выделено мной):

Атрибут id указывает свой уникальный идентификатор элемента (ID). значение должно быть уникальным среди всех идентификаторов в домашнем поддереве элемента и должен содержать хотя бы один символ. Значение не должно содержать любые пробельные символы.

Ответ 5

У вас просто не может быть пробелов. Если вы используете пробел, это означает, что вы используете два разных класса. Один из них - para, а другой - one.

Ответ 6

Современные браузеры фактически поддерживают id с пробелами. Итак, на Chrome 54 это работает:

p#para\ one {
}

И современные браузеры не поддерживают синтаксис [id="..."], поэтому

p[id='para one'] {
}

не работает в Chrome 54.