Làm cách nào để kết hợp lớp và ID trong bộ chọn CSS?

Nếu tôi có div sau:

<div class="sectionA" id="content">
    Lorem Ipsum...
</div>

Có cách nào để xác định một phong cách thể hiện ý tưởng "Một div với id='content'AND class='myClass'" không?

Hoặc bạn chỉ đơn giản là đi bằng cách này hay cách khác như trong

<div class="content-sectionA">
    Lorem Ipsum...
</div>

Hoặc là

<div id="content-sectionA">
    Lorem Ipsum...
</div>

Trong biểu định kiểu của bạn:

div#content.myClass

Chỉnh sửa: Chúng cũng có thể giúp:

div#content.myClass.aSecondClass.aThirdClass /* Won't work in IE6, but valid */
div.firstClass.secondClass /* ditto */

và, theo ví dụ của bạn:

div#content.sectionA

Chỉnh sửa, 4 năm sau: Vì nó quá cũ và mọi người cứ tìm thấy nó: không sử dụng tagNames trong bộ chọn của bạn. #content.myClassnhanh hơn div#content.myClassvì tagName thêm một bước lọc mà bạn không cần. Sử dụng tagNames trong bộ chọn chỉ khi bạn phải!

Có sự khác biệt giữa #header .calloutvà #header.callouttrong css.

Đây là "tiếng Anh đơn giản" của #header .callout:
Chọn tất cả các thành phần có tên lớp calloutlà hậu duệ của thành phần có ID là header.

Và #header.calloutcó nghĩa là:
Chọn phần tử có ID headervà cũng là tên lớp của callout.

Bạn có thể đọc thêm ở đây thủ thuật css

Không có gì sai khi kết hợp id và một lớp trên một yếu tố, nhưng bạn không cần phải xác định nó theo cả hai quy tắc. Nếu bạn thực sự muốn, bạn có thể làm:

#content.sectionA{some rules}

Bạn không cần divtrước ID như những người khác đã đề xuất.

Nói chung, các quy tắc CSS dành riêng cho thành phần đó phải được đặt cùng với ID và các quy tắc này sẽ có trọng số lớn hơn so với các quy tắc chỉ của lớp. Các quy tắc được chỉ định bởi lớp sẽ là các thuộc tính áp dụng cho nhiều mục mà bạn không muốn thay đổi ở nhiều nơi bất cứ lúc nào bạn cần điều chỉnh.

Điều đó có nghĩa là:

 .sectionA{some general rules here}
 #content{specific rules, and overrides for things in .sectionA}

Có lý?

Nói chung, bạn không cần phải phân loại một yếu tố được chỉ định bởi id, vì id luôn là duy nhất, nhưng nếu bạn thực sự cần, thì những điều sau đây sẽ hoạt động:

div#content.sectionA {
    /* ... */
}

Bạn có thể kết hợp ID và Class trong CSS, nhưng ID được dự định là duy nhất, vì vậy việc thêm một lớp vào bộ chọn CSS sẽ vượt quá khả năng của nó.

sử dụng: tag.id ; tag#classtrong các biến thẻ trong css của bạn.

Id được cho là rộng tài liệu duy nhất, vì vậy bạn không cần phải chọn dựa trên cả hai. Bạn có thể gán một phần tử nhiều lớp mặc dù vớiclass="class1 class2"

Tôi nghĩ rằng tất cả các bạn đều sai. ID so với Class không phải là một câu hỏi về tính đặc hiệu; chúng có cách sử dụng logic hoàn toàn khác nhau.

ID nên được sử dụng để xác định các phần cụ thể của trang: tiêu đề, thanh điều hướng, bài viết chính, phân bổ tác giả, chân trang.

Các lớp nên được sử dụng để áp dụng các kiểu cho trang. Giả sử bạn có một trang tạp chí chung. Mỗi trang trên trang web sẽ có cùng các yếu tố - tiêu đề, điều hướng, bài viết chính, thanh bên, chân trang. Nhưng tạp chí của bạn có các phần khác nhau - kinh tế, thể thao, giải trí. Bạn muốn ba phần có ngoại hình khác nhau - kinh tế bảo thủ và vuông vắn, thể thao hành động, giải trí tươi sáng và trẻ trung.

Bạn sử dụng các lớp học cho điều đó. Bạn không muốn phải tạo nhiều ID - # kinh tế-bài viết và # thể thao-bài viết và # giải trí-bài viết. Điều đó không có ý nghĩa. Thay vào đó, bạn sẽ định nghĩa ba lớp, .economics, sports và .enter Earn, sau đó xác định các id #nav, #article và #footer cho mỗi id.

.sectionA[id='content'] { color : red; }

Sẽ không hoạt động khi doctype là html 4.01 mặc dù ...