php - HTML 中的多个类属性

Question

当一个元素有多个 class 属性时会发生什么？

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

我试图在 WordPress 插件中向 post_class(); 的输出添加一个类，但函数本身正在创建整个部分 class="one two three"

是否等同于class="一二三四"？还是第一或第二获胜？或者它是未定义的行为，在这种情况下主流浏览器会做什么？

如果您知道将类添加到此代码段(WordPress 插件)的正确方法，那么也将不胜感激!

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

Answer 1

What happens when an element has multiple class attributes?

当为单个元素多次声明一个属性时(顺便说一句，这是无效的 HTML)，从行为上讲，第一个值将覆盖同一属性的所有后续值。所以在这种情况下，您的元素将只有类一二三。

此行为在 the HTML5 spec, 8.2.4.35 Attribute name state 中进行了解释。 , "...如果 [element] 上已经存在同名的属性，则这是一个解析错误，必须删除新属性..."

If you know the correct way of adding a class to this snippet (WordPress plugin), then that would also be appreciated!

通常，如果您需要将自定义类动态添加到您的 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 .