Làm thế nào để gán nhiều lớp cho một thùng chứa HTML? [đóng cửa]

398

Có thể gán nhiều lớp cho một HTMLcontainer không?

Cái gì đó như:

<article class="column, wrapper">

html class

— ARGO
nguồn

Bạn có vấn đề gì bây giờ? Bất kỳ cách nào đó là giải pháp cho vấn đề này. Bất kỳ vấn đề khác có thể phụ thuộc vào một số yếu tố.

— Aurelio De Rosa

1

Mặc dù điều này là có thể thực hiện được, tôi thường sử dụng các thùng chứa lồng nhau với sự kế thừa CSS. Nó đẹp hơn nhiều, và thường hữu ích hơn.

— Jonathan Henson

Nếu bạn vẫn gặp sự cố sau khi xóa dấu phẩy, tôi khuyên bạn nên xem hướng dẫn về lý do tại sao các quy tắc không hoạt động . Tôi đã tìm thấy cú hích tốc độ phổ biến nhất đối với tôi là tình huống được mô tả ở đó là "Sử dụng tốc độ nhanh" (nghĩa là hoàn toàn trở lại giá trị mặc định)

— LJ tại NJ

531

Chỉ cần xóa dấu phẩy như thế này:

<article class="column wrapper">

— Aurelio De Rosa
nguồn

3

— Andre Elrico

1

Wierd không gian của nó thay vì dấu phẩy. Nhưng vâng, cảm ơn vì câu trả lời

— Soham Mehta

188

Từ tiêu chuẩn

7.5.2 Định danh phần tử: thuộc tính id và class

Định nghĩa thuộc tính

id = name [CS]
Thuộc tính này gán tên cho một phần tử. Tên này phải là duy nhất trong một tài liệu.

class = cdata-list [CS]
Thuộc tính này gán tên lớp hoặc tập hợp tên lớp cho một phần tử. Bất kỳ số lượng phần tử có thể được gán cùng tên hoặc tên lớp. Nhiều tên lớp phải được phân tách bằng các ký tự khoảng trắng.

Vâng, chỉ cần đặt một khoảng trống giữa chúng.

<article class="column wrapper">

Tất nhiên, có nhiều điều bạn có thể làm với kế thừa CSS. Đây là một bài viết để đọc thêm .

— Jonathan Henson
nguồn

3

Trình duyệt sẽ được phản ứng như thế nào nếu một phần tử được gán cho nhiều lớp đặt các giá trị khác nhau cho cùng một thuộc tính. Có một số thứ tự ưu tiên cho điều đó?

— EternallyCquil

6

@JonathanHenson: không, không phải vậy. Trong trường hợp có tính đặc hiệu ràng buộc, quy tắc xảy ra sau này trong CSS sẽ thắng.

— Ulrich Schwarz

1

@UlrichSchwarz lớp CSS được liệt kê sau này (điều mà tôi đã hy vọng khi tôi thử nghiệm điều này), hoặc sau này trong tất cả các tệp CSS? Bởi vì cái trước chắc chắn không hoạt động trong các trình duyệt mà tôi đã thử nghiệm, trong khi tôi đã thử nghiệm giả thuyết sau.

— Jonathan Henson

9

@JonathanHenson: Theo thông số kỹ thuật CSS 2.1 , "nếu hai khai báo có cùng trọng số, nguồn gốc và tính đặc hiệu, thì khai báo sau được chỉ định. Các khai báo trong biểu định kiểu nhập khẩu được coi là trước bất kỳ khai báo nào trong chính biểu định kiểu." Vì vậy, nó là thứ tự khai báo CSS. Các tên trong thuộc tính lớp không có thứ tự xác định, vì .foolà cú pháp đường cho [class ~= foo] ref , " foolà một từ trong classthuộc tính".

— Ulrich Schwarz

1

@UlrichSchwarz Cảm ơn bạn đã làm rõ.

— Jonathan Henson

18

Để gán nhiều lớp cho một phần tử html , bao gồm cả hai tên lớp trong phần trích dẫn của thuộc tính lớp và phân tách chúng bằng một khoảng trắng:

<article class="column wrapper">

Trong ví dụ trên, columnvà wrapperlà hai lớp css riêng biệt và cả hai thuộc tính của chúng sẽ được áp dụng cho articlephần tử.

— Webeng
nguồn

16

Câu trả lời này có gì khác so với trước đây?

— Iván Rodríguez Torres

-2

bạn cần đặt một dấu chấm giữa các lớp như

class = "cột.wrapper">

— amit kumar
nguồn