Несколько атрибутов класса в HTML

Что происходит, когда элемент имеет несколько атрибутов class?

<div id="test" class="one two three" class="four">

Я пытаюсь добавить класс к выходу post_class(); в плагин WordPress, но сама функция создает всю часть class="one two three"

Это эквивалентно class="one two three four"? Или первая или вторая победа? Или это поведение undefined, и в этом случае что делают основные браузеры?

Если вы знаете правильный способ добавления класса к этому фрагменту (плагин WordPress), тогда это также будет оценено!

<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

Ответы

Ответ 1

Что происходит, когда элемент имеет несколько атрибутов класса?

Когда атрибут объявляется несколько раз для одного элемента (который, кстати говоря, является недействительным HTML), поведенческое поведение первое значение переопределяет все последующие значения для одного и того же атрибута. Таким образом, в этом случае ваш элемент будет иметь только классы one two three.

Это поведение объясняется в спецификации HTML5, 8.2.4.35 Состояние имени атрибута, "... если на атрибуте уже есть атрибут [element] с таким же именем, то это ошибка синтаксического анализа и новый атрибут должен быть удален..."

Если вы знаете правильный способ добавления класса к этому фрагменту (плагин WordPress), тогда это также будет оценено!

Как правило, если вам нужно динамически добавлять пользовательские классы в свои сообщения WordPress, вы подключаетесь к фильтру post_class и при необходимости управляете массивом $classes. Вот что это примерно похоже на мои темы:

function nv_post_class( $classes ) {
    // Most recent post on the front page
    global $count;
    if ( is_home() && 1 == $count )
        $classes[] = 'latest-post';

    return $classes;
}

add_filter( 'post_class', 'nv_post_class' );

Если вам нужно только добавить один или несколько статических классов, передайте их в виде строки с разделителем пробела непосредственно на post_class():

<div id="post-<?php the_ID(); ?>" <?php post_class( 'myclass1 myclass2' ); ?>>

Подробнее об этом в WordPress Codex.

Ответ 2

Затем документ будет недействительным, и браузер попытается выполнить восстановление с ошибкой.

Из спецификация HTML 5:

Если имя атрибута уже находится в списке атрибутов, вернитесь к шагам с метками.

Итак, если используется парсер HTML 5, должен применяться первый атрибут.