Question

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

<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(); ?>>

Answer 1

当元素具有多个类属性时会发生什么？

当一个元素（顺便说一下是无效的HTML）多次声明属性时，行为方面第一个值将覆盖同一属性的所有后续值。因此，在这种情况下，您的元素将只有类one two three。

在the HTML5 spec, 8.2.4.35 Attribute name state中解释了这种行为，“...如果[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中的更多内容。

Answer 2

然后文档无效，浏览器将尝试执行错误恢复。

来自HTML 5 specification：

如果属性名称已在属性列表中，则返回标记为属性的步骤。

因此，如果正在使用HTML 5解析器，则应该应用第一个属性。

HTML中的多个类属性

2 个答案: