当HTML 中有多个class属性会出现什么问题

更新于 2022年1月9日 wordpress教程

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

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

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

相当于class="one two three four"吗？ 还是第一次或第二次获胜？ 或者它是未定义的行为，在这种情况下主要浏览器会做什么？

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

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

解决方案

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

当为单个元素多次声明属性时（顺便说一下，这是无效的 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' ); ?>>

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

从HTML 5 规范：

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

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

你可能还喜欢下面这些文章

蜂集采集器jQuery选择器采集教程蜂集采集器jQuery选择器采集教程

jQuery选择器参考手册选择器实例选取*$(“*”)所有元素#id$(“#lastname”)id=”lastname”。元素.class.class$(“.intro.demo”)所有。

蜂集如何使用jQuery选择器采集网页内容蜂集如何使用jQuery选择器采集网页内容

的元素.class$(“.intro”)所有。visible”)所有可见的表格s1,s2,s3$(“th,td,.intro”)所有带有匹配选择的元素$(“”)所有带有。

Wordpress 主循环 - 如何在指定文章数之前添加classWordPress 主循环 – 如何在指定文章数之前添加class

WordPress。但我需要将某些class添加到前。解决方案您可以使用的属性，如下所示：请注意与的区别，它计算虽然匹配查询但未显示（例如用于分页）的帖子。这是一种解决方法：我用这个在我的博客中。

如何用浏览器获取XPath规则，蜂集XPath使用指南如何用浏览器获取XPath规则，蜂集XPath使用指南

XPath的方便之处就在于可以用浏览器直接提取出来。如何用浏览器提取XPath使用chrome浏览器打开你想采集的网址。XPath来代替copy。测试XPath把提取到的XPath复制到规则中点击测试抓取由于有些占站点做了防盗链，直接采集时候

如何获取网站的Cookie如何获取网站的Cookie

方法第一步：使用chrome浏览器，打开目标网站。将会打开浏览器的开发者模式，切换到网络tab，再刷新网页。将会打开如下页面：选中首页，在请求标头中Cookie后面的一串字符串就是网站的cookie。