blocks|key|2902356|text|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2902357|当一个元素有多个类属性时会发生什么？|blockquote|2902358|2902359|2902360|当为单个元素多次声明属性时(顺便说一句，这是无效的HTML+)，行为方面，第一个值将覆盖同一属性的所有后续值。因此，在本例中，您的元素将只有类one+two+three。|offset|length|style|CODE|2902361|在the+HTML5+spec,+8.2.4.35+Attribute+name+state中解释了这种行为，"...如果元素上已经有一个同名的属性，那么这是一个解析错误，必须删除新的属性...“|2902362|2902363|如果你知道在这个代码片段中添加类的正确方法(WordPress插件)，那么也将不胜感激！|2902364|2902365|2902366|通常，如果您需要向WordPress帖子动态添加自定义类，您可以挂接到post_class过滤器，并根据需要操作$classes数组。下面是我的主题中的大致内容：|2902367|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'+);|code-block|syntax|javascript|2902368|如果只需要添加一个或多个静态类，请将它们作为空格分隔的字符串直接传递给post_class()|2902369|<div+id="post-<?php+the_ID();+?>"+<?php+post_class(+'myclass1+myclass2'+);+?>>|2902370|有关这方面的更多信息，请参阅WordPress+Codex。|2902371|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/TR/html5/syntax.html#attribute-name-state|1|https://codex.wordpress.org/Function_Reference/post_class^0|0|0|0|0|1Z|D|0|1|19|0|0|0|0|0|0|Z|A|1K|8|0|0|Z|C|0|0|E|F|1|0^^$0|@$1|2|3|-4|4|5|6|1F|7|@]|8|@]|9|$]]|$1|A|3|B|4|C|6|1G|7|@]|8|@]|9|$]]|$1|D|3|-4|4|5|6|1H|7|@]|8|@]|9|$]]|$1|E|3|-4|4|5|6|1I|7|@]|8|@]|9|$]]|$1|F|3|G|4|5|6|1J|7|@$H|1K|I|1L|J|K]]|8|@]|9|$]]|$1|L|3|M|4|5|6|1M|7|@]|8|@$H|1N|I|1O|1|1P]]|9|$]]|$1|N|3|-4|4|5|6|1Q|7|@]|8|@]|9|$]]|$1|O|3|P|4|C|6|1R|7|@]|8|@]|9|$]]|$1|Q|3|-4|4|5|6|1S|7|@]|8|@]|9|$]]|$1|R|3|-4|4|5|6|1T|7|@]|8|@]|9|$]]|$1|S|3|T|4|5|6|1U|7|@$H|1V|I|1W|J|K]|$H|1X|I|1Y|J|K]]|8|@]|9|$]]|$1|U|3|V|4|W|6|1Z|7|@]|8|@]|9|$X|Y]]|$1|Z|3|10|4|5|6|20|7|@$H|21|I|22|J|K]]|8|@]|9|$]]|$1|11|3|12|4|W|6|23|7|@]|8|@]|9|$X|Y]]|$1|13|3|14|4|5|6|24|7|@]|8|@$H|25|I|26|1|27]]|9|$]]|$1|15|3|-4|4|5|6|28|7|@]|8|@]|9|$]]]|16|$17|$4|18|19|1A|9|$1B|1C]]|1D|$4|18|19|1A|9|$1B|1E]]]]

<blockquote>
 What happens when an element has multiple class attributes?
</blockquote>

When an attribute is declared multiple times for a single element (which is invalid HTML, by the way), behavior-wise the first value will override all subsequent values for the same attribute. So in this case, your element will only have the classes <code>one two three</code>.

This behavior is explained in <a href="http://www.w3.org/TR/html5/syntax.html#attribute-name-state" rel="noreferrer">the HTML5 spec, 8.2.4.35 Attribute name state</a>, "... if there is already an attribute on the [element] with the exact same name, then this is a parse error and the new attribute must be removed..."

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

Typically, if you need to add custom classes dynamically to your WordPress posts, you hook onto the <code>post_class</code> filter and manipulate the <code>$classes</code> array as necessary. Here's what it roughly looks like in my themes:

<pre><code>function nv_post_class( $classes ) {
 // Most recent post on the front page
 global $count;
 if ( is_home() &amp;&amp; 1 == $count )
 $classes[] = 'latest-post';

 return $classes;
}

add_filter( 'post_class', 'nv_post_class' );
</code></pre>

If you only need to add one or more static classes, pass them as a space-delimited string directly to <code>post_class()</code>:

<pre><code>&lt;div id="post-&lt;?php the_ID(); ?&gt;" &lt;?php post_class( 'myclass1 myclass2' ); ?&gt;&gt;
</code></pre>

More on this in the <a href="https://codex.wordpress.org/Function_Reference/post_class" rel="noreferrer">WordPress Codex</a>.

blocks|key|3116538|text|则该文档将无效，并且浏览器将尝试执行错误恢复。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3116539|从HTML+5+specification|offset|length|3116540|3116541|如果属性的名称已在属性列表中，则返回到标记为attributes的步骤。|blockquote|3116542|3116543|3116544|因此，如果使用的是HTML5解析器，则应该应用第一个属性。|3116545|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/TR/html5/parsing.html^0|0|1|K|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|W|8|@]|9|@$D|X|E|Y|1|Z]]|A|$]]|$1|F|3|-4|5|6|7|10|8|@]|9|@]|A|$]]|$1|G|3|H|5|I|7|11|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|12|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|13|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|14|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|O|$P|$5|Q|R|S|A|$T|U]]]]

Then the document will be invalid and the browser will attempt to perform error recovery.

From the <a href="http://www.w3.org/TR/html5/parsing.html" rel="noreferrer">HTML 5 specification</a>:

<blockquote>
 If the attribute's name is already in attribute list, then return to the step labeled attributes.
</blockquote>

So, if an HTML 5 parser is being used, the first attribute should apply.

What happens when an element has multiple <code>class</code> attributes?

<pre><code>&lt;div id="test" class="one two three" class="four"&gt;
</code></pre>

I'm trying to add a class to the output of <code>post_class();</code> in a WordPress plugin, but the function itself is creating the entire part <code>class="one two three"</code>

Is it equivalent to <code>class="one two three four"</code>?
Or does the first or second win?
Or is it undefined behaviour, in which case what do the major browsers do?

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

<pre><code>&lt;div id="post-&lt;?php the_ID(); ?&gt;" &lt;?php post_class(); ?&gt;&gt;
</code></pre>

Multiple class attributes in HTML

WordPress

HTML5

当一个元素有多个class属性时会发生什么？<div id="test" class="one two three" class="four">我试图在WordPress插件中的post_class();输出中添加一个类，但函数本身创建的是整个部分class="one two three"它等同于class="one ...

问HTML中的多个类属性
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML中的多个类属性EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML中的多个类属性
EN