HTML中的多個類屬性

元素具有多個class屬性時會發生什麼？HTML中的多個類屬性

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

我想要一類的WordPress插件添加到post_class();輸出，但功能本身創建整個部分class="one two three"

是否等同於class="one two three four"？還是第一次或第二次勝利？或者它是未定義的行爲，在這種情況下主要的瀏覽器做什麼？

如果您知道向此代碼段（WordPress插件）添加類的正確方法，那麼也將不勝感激！

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

來源

2012-03-01 RichardTheKiwi

當一個元素有多個類屬性會發生什麼？

當屬性被聲明爲單個元件（它是無效的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。

來源

2012-03-01 07:38:59 BoltClock

然後文檔將無效，瀏覽器將嘗試執行錯誤恢復。

從HTML 5 specification：

如果屬性的名稱已在屬性列表，然後返回步驟標記屬性。

因此，如果使用HTML 5解析器，則應該應用第一個屬性。

來源

2012-03-01 07:44:09 Quentin

至少在webkit和Firefox中，這是正確的，第一個類被尊重，隨後被丟棄。 [小提琴]（http://jsfiddle.net/sBp5Z/） – steveax 2012-03-01 07:46:06

HTML中的多個類屬性

回答

相關問題