Tôi có thể sử dụng id và lớp ở đâu? sự khác biệt giữa chúng là gì? Có cần thiết mà chúng ta nên bắt buộc sử dụng id trong CSS của chúng tôi?Sự khác biệt giữa các lớp và ID trong CSS là gì? Giải thích ví dụ về nơi sử dụng
ID có nghĩa là duy nhất, trong khi các lớp học tốt hơn cho "loại" phần tử.
Vì vậy, bạn có thể có một cái gì đó như:
<ul id="menu">
....
</ul>
Bởi vì bạn có thể sẽ chỉ có 1 menu chính trên trang web của bạn.
Đối với các lớp học, tuy nhiên, bạn có thể có một cái gì đó như:
<span class='author'>Paolo Bergantino</span>
Hoặc có lẽ để tạo kiểu cho div có chứa một câu trả lời trên trang web này:
<div class='answer'>....</div>
Bởi vì sẽ có nhiều những trên mỗi trang, chúng là một lớp các phần tử. Hãy coi ID là số an sinh xã hội của một phần tử. Bất cứ khi nào một yếu tố đủ quan trọng và là duy nhất, bạn cung cấp cho nó một ID. Điều này cũng giúp với các trang web động khi chọn các phần tử theo ID là cách nhanh nhất và nếu bạn có nhiều phần tử có cùng ID (do đó vi phạm thực tế này) Javascript sẽ không hoạt động như dự định.
Từ w3schools:
Các id thuộc tính chỉ định một id duy nhất cho một phần tử HTML.
Id phải là duy nhất trong tài liệu HTML .
Thuộc tính id có thể được sử dụng bởi JavaScript (qua DOM HTML) hoặc CSS để thực hiện thay đổi hoặc tạo kiểu cho thành phần với id được chỉ định.
và
Các lớp thuộc tính chỉ định một classname cho một phần tử.
Thuộc tính lớp học chủ yếu được sử dụng để trỏ đến một lớp trong một biểu định kiểu. Tuy nhiên, nó cũng có thể được sử dụng bởi một mã JavaScript (qua DOM HTML) để thực hiện thay đổi đối với các phần tử HTML với một lớp được chỉ định là .
Thuộc tính lớp không thể được sử dụng trong các phần tử HTML sau: cơ sở, đầu, html, meta, param, script, kiểu và tiêu đề.
Có thể chỉ định nhiều lớp cho một phần tử HTML, ví dụ: . Điều này cho phép bạn kết hợp một số lớp CSS cho một phần tử HTML.
ID là đề cập đến một phần tử cụ thể (mọi ID không bao giờ được sử dụng nhiều lần); một lớp tham chiếu đến nhiều phần tử.
Trong khi bạn có thể lớp sử dụng cho tất cả mọi thứ, sự tách biệt giữa "lớp học mà chỉ xảy ra một lần" (ví dụ: ID) và "lớp học thông thường" là khá hữu ích để giữ cho CSS của bạn có ý nghĩa cho chính mình.
.menu { ... } /* Err, how many of those did I have? */
#menu { ... } /* Ahh, THE menu. */
ID xác định chính xác một yếu tố DOM, duy nhất. Một lớp xác định một nhóm các phần tử DOM có liên quan.
Ví dụ, bạn có thể có một, menu nav độc đáo duy nhất, xác định bởi một ID:
<div id="nav">...</div>
và bên trong nó có một số bộ menu, mỗi trong số đó cũng được xác định duy nhất và thuộc một lớp học phổ biến:
<div id="nav">
<ul id="content_menu" class="menu">...</ul>
<ul id="contact_menu" class="menu">...</ul>
<ul id="personal_menu" class="menu">...</ul>
</div>
ngắn và đơn giản:
lớp học có thể được sử dụng như nhiều lần nếu cần (và được xác định bởi một khoảng thời gian). Chỉ có thể sử dụng các id trên ONE phần tử (và được xác định bởi một bảng Anh).
<style>
.class {
font-size: 3em;
}
#id {
font-size: 3em;
}
</style>
<body>
<span class="class">I am a class</span>
<span class="class">Look at me, also a class</span>
<span id="id">I am special, you can only have one of me or I do not meet XHTML standards</span>
dụ gud, đẹp và nhờ – Rajasekar
có thể trùng lặp, http://stackoverflow.com/q/544010/425313 –