Nhiều thuộc tính lớp học trong HTML

Question

Điều gì xảy ra khi một phần tử có nhiều thuộc tính class?

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

Tôi đang cố gắng để thêm một lớp học để đầu ra của post_class(); trong một plugin WordPress, nhưng chức năng chính là tạo ra toàn bộ phần class="one two three"

Có tương đương với class="one two three four"? Hoặc chiến thắng đầu tiên hay thứ hai? Hoặc là hành vi không xác định, trong trường hợp nào các trình duyệt chính làm gì?

Nếu bạn biết chính xác cách thêm lớp vào đoạn mã này (plugin WordPress), thì điều đó cũng sẽ được đánh giá cao!

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

Answer 1

Điều gì xảy ra khi phần tử có nhiều thuộc tính lớp?

Khi thuộc tính được khai báo nhiều lần cho một phần tử (HTML không hợp lệ), hành vi khôn ngoan giá trị đầu tiên sẽ ghi đè tất cả các giá trị tiếp theo cho cùng một thuộc tính. Vì vậy, trong trường hợp này, phần tử của bạn sẽ chỉ có các lớp one two three.

Hành vi này được giải thích trong the HTML5 spec, 8.2.4.35 Attribute name state, "... nếu đã có thuộc tính trên [phần tử] có cùng tên chính xác thì đây là lỗi phân tích cú pháp và thuộc tính mới phải bị xóa ..."

Nếu bạn biết chính xác cách thêm lớp vào đoạn mã này (plugin WordPress), thì điều đó cũng sẽ được đánh giá cao!

Thông thường, nếu bạn cần thêm các lớp tùy chỉnh động vào bài đăng trên WordPress, hãy móc vào bộ lọc post_class và thao tác mảng $classes nếu cần. Dưới đây là những gì nó đại khái trông như thế nào trong chủ đề của tôi:

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'); 

Nếu bạn chỉ cần thêm một hoặc tĩnh hơn các lớp học, vượt qua chúng như là một chuỗi không gian được phân định trực tiếp đến post_class():

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

Thông tin thêm về điều này trong số WordPress Codex.

Answer 2

Sau đó, tài liệu sẽ không hợp lệ và trình duyệt sẽ cố thực hiện khôi phục lỗi.

Từ HTML 5 specification:

Nếu tên của thuộc tính là đã có trong danh sách thuộc tính, sau đó trở về bước dán nhãn thuộc tính.

Vì vậy, nếu một trình phân tích cú pháp HTML 5 đang được sử dụng, thuộc tính đầu tiên sẽ được áp dụng.