HTMLの複数のクラス属性

Question

要素に複数のclass属性があるとどうなりますか？

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

私はWordPressのプラグインでpost_class();の出力にクラスを追加しようとしていますが、機能自体は全体の一部class="one two three"

を作成していることがclass="one two three four"に相当しますか？ 最初の勝利か2番目の勝利はありますか？ それは未定義の動作ですか？この場合、主要なブラウザは何をしますか？

このスニペット（WordPressプラグイン）にクラスを追加する正しい方法がわかっている場合は、それも感謝します。

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

Answer 1

要素が複数のクラスの属性を持っている場合はどうなりますか？属性は（ちなみに、無効なHTMLをある）の単一要素の複数回宣言されている

、行動ごとの最初の値は、同じ属性のそれ以降のすべての値を上書きします。この場合、要素にはクラスone two threeのみが含まれます。

この現象については、the HTML5 spec, 8.2.4.35 Attribute name stateで説明されています。「... [要素]に同じ名前の属性が既に存在する場合は、解析エラーです。新しい属性を削除する必要があります...」

このスニペット（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です。

Answer 2

文書が無効になり、ブラウザはエラー回復を実行しようとします。

HTML 5 specificationから：

属性の名前は、ステップラベルの属性に戻り、その後、属性リストにすでにある場合。

したがって、HTML 5パーサーが使用されている場合は、最初の属性が適用されます。