HTML 中的多个类属性

php html css wordpress

2022-08-30 17:10:04

当元素具有多个属性时会发生什么情况？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(); ?>>

答案 1

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

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

HTML5 规范 8.2.4.35 属性名称状态“...如果 [元素] 上已经存在具有完全相同名称的属性，则这是一个解析错误，必须删除新属性...”

如果您知道将类添加到此代码段（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 解析器，则应应用第一个属性。