Sự khác biệt giữa id và class là gì?

Sự khác biệt giữa <div class="">và <div id="">khi nói đến CSS là gì? Có ổn không khi sử dụng <div id="">?

Tôi thấy các nhà phát triển khác nhau làm điều này theo cả hai cách và vì tôi tự học, tôi chưa bao giờ thực sự tìm ra nó.

idsphải là duy nhất nơi classcó thể được áp dụng cho nhiều thứ. Trong CSS, ids trông giống như #elementIDvà classcác yếu tố trông giống như.someClass

Nói chung, sử dụng idbất cứ khi nào bạn muốn đề cập đến một yếu tố cụ thể và classkhi bạn có một số thứ hoàn toàn giống nhau. Ví dụ, phổ biến idcác yếu tố là những thứ như header, footer, sidebar. Các classyếu tố phổ biến là những thứ như highlighthoặc external-link.

Đó là một ý tưởng tốt để đọc lên các tầng và hiểu quyền ưu tiên được gán cho các bộ chọn khác nhau: http://www.w3.org/TR/CSS2/cascade.html

Tuy nhiên, ưu tiên cơ bản nhất mà bạn nên hiểu là các công idcụ chọn được ưu tiên hơn các công classcụ chọn. Nếu bạn đã có điều này:

<p id="intro" class="foo">Hello!</p>

và:

#intro { color: red }
.foo { color: blue }

Văn bản sẽ có màu đỏ vì idbộ chọn được ưu tiên hơn classbộ chọn.

Có lẽ một sự tương tự sẽ giúp hiểu được sự khác biệt:

<student id="JonathanSampson" class="Biology Calculus" />
<student id="MarySmith" class="Biology Networking" />

Student ID thẻ là khác biệt. Không có hai sinh viên trong khuôn viên trường sẽ có cùng một sinh viên ID thẻ. Tuy nhiên, nhiều sinh viên có thể và sẽ chia sẻ ít nhất một Lớp với nhau.

Bạn có thể đặt nhiều sinh viên dưới một tiêu đề Lớp , chẳng hạn như Sinh học. Nhưng không bao giờ có thể chấp nhận đặt nhiều sinh viên dưới một ID sinh viên .

Khi đưa ra quy tắc trên hệ thống liên lạc nội bộ của trường, bạn có thể cung cấp Quy tắc cho Lớp :

"Ngày mai, tất cả học sinh sẽ mặc áo đỏ đến lớp Sinh học."

.Biology {
  color: red;
}

Hoặc bạn có thể đưa ra các quy tắc cho một Sinh viên cụ thể, bằng cách gọi duy nhất của anh ấy ID :

"Jonathan Sampson sẽ mặc áo màu xanh lá cây vào ngày mai."

#JonathanSampson {
  color: green;
}

Trong trường hợp này, Jonathan Sampson đang nhận được hai lệnh: một là học sinh trong lớp Sinh học, và một lệnh khác là yêu cầu trực tiếp. Bởi vì Jonathan được nói trực tiếp, thông qua thuộc tính id, mặc áo màu xanh lá cây, anh ta sẽ bỏ qua yêu cầu trước đó là mặc áo đỏ.

Các bộ chọn cụ thể hơn giành chiến thắng.

Nơi sử dụng ID so với một lớp

Sự khác biệt đơn giản giữa hai loại là trong khi một lớp có thể được sử dụng nhiều lần trên một trang, ID chỉ phải được sử dụng một lần trên mỗi trang. Do đó, thích hợp sử dụng ID trên phần tử div đang đánh dấu nội dung chính trên trang, vì sẽ chỉ có một phần nội dung chính. Ngược lại, bạn phải sử dụng một lớp để thiết lập các màu hàng xen kẽ trên một bảng, vì theo định nghĩa chúng sẽ được sử dụng nhiều lần.

ID là một công cụ vô cùng mạnh mẽ. Một phần tử có ID có thể là mục tiêu của một đoạn JavaScript thao túng phần tử hoặc nội dung của nó theo một cách nào đó. Thuộc tính ID có thể được sử dụng làm mục tiêu của một liên kết nội bộ, thay thế các thẻ neo bằng các thuộc tính tên. Cuối cùng, nếu bạn làm cho ID của mình rõ ràng và hợp lý, chúng có thể đóng vai trò là một loại tài liệu tự xóa của bạn trong tài liệu. Ví dụ: bạn không nhất thiết phải thêm nhận xét trước khi một khối cho biết rằng một khối mã sẽ chứa nội dung chính nếu thẻ mở của khối có ID, ví dụ: "chính", "tiêu đề", "chân trang ", Vân vân.

Một id phải là duy nhất trong toàn bộ trang.

Một lớp có thể áp dụng cho nhiều yếu tố.

Đôi khi, đó là một ý tưởng tốt để sử dụng id.

Trong một trang, bạn thường có một chân trang, một tiêu đề ...

Sau đó, chân trang có thể vào div với id

<div id = "chân trang" class = "...">

và vẫn có một lớp học

Một lớp nên được sử dụng cho nhiều yếu tố mà bạn muốn cùng một kiểu dáng. Một ID nên dành cho một yếu tố duy nhất. Xem hướng dẫn này .

Bạn nên tham khảo các tiêu chuẩn W3C nếu bạn muốn tuân thủ nghiêm ngặt hoặc nếu bạn muốn các trang của bạn được xác nhận theo tiêu chuẩn.

ID là duy nhất. Các lớp học không. Các yếu tố cũng có thể có nhiều lớp. Ngoài ra các lớp có thể được tự động thêm và loại bỏ thành một phần tử.

Bất cứ nơi nào bạn có thể sử dụng ID, bạn có thể sử dụng một lớp thay thế. Điều ngược lại là không đúng sự thật.

Quy ước dường như là sử dụng ID cho các thành phần trang có trên mỗi trang (như "thanh điều hướng" hoặc "menu") và các lớp cho mọi thứ khác nhưng đây chỉ là quy ước và bạn sẽ thấy sự khác biệt trong cách sử dụng.

Một điểm khác biệt nữa là đối với các phần tử đầu vào của biểu mẫu, <label>phần tử tham chiếu một trường theo ID, do đó bạn cần sử dụng ID nếu bạn sẽ sử dụng<label> . là một điều khả năng tiếp cận và bạn thực sự nên sử dụng nó.

Trong nhiều năm qua, ID cũng được ưa thích vì chúng có thể truy cập dễ dàng trong Javascript (getEuityById). Với sự ra đời của jQuery và các khung công tác Javascript khác, điều này gần như không còn là vấn đề nữa.

Các lớp học giống như thể loại. Nhiều phần tử HTML có thể thuộc về một lớp và một phần tử HTML có thể có nhiều hơn một lớp. Các lớp được sử dụng để áp dụng các kiểu hoặc kiểu chung có thể được áp dụng trên nhiều phần tử HTML.

ID là định danh. Chúng là duy nhất; không ai khác được phép có cùng ID đó. ID được sử dụng để áp dụng các kiểu duy nhất cho thành phần HTML.

Tôi sử dụng ID và các lớp theo cách này:

<div id="header">
  <h1>I am a header!</h1>
  <p>I am subtext for a header!</p>
</div>
<div id="content">
  <div class="section">
    <p>I am a section!</p>
  </div>
  <div class="section special">
    <p>I am a section!</p>
  </div>
  <div class="section">
    <p>I am a section!</p>
  </div>
</div>

Trong ví dụ này, phần tiêu đề và nội dung có thể được tạo kiểu thông qua #header và #content. Mỗi phần của nội dung có thể được áp dụng một kiểu chung thông qua #content .section. Chỉ với những cú đá, tôi đã thêm một lớp "đặc biệt" cho phần giữa. Giả sử bạn muốn một phần cụ thể để có một kiểu dáng đặc biệt. Điều này có thể đạt được với lớp .special, tuy nhiên phần này vẫn kế thừa các kiểu phổ biến từ #content .section.

Khi tôi phát triển JavaScript hoặc CSS, tôi thường sử dụng ID để truy cập / thao tác một phần tử HTML rất cụ thể và tôi sử dụng các lớp để truy cập / áp dụng các kiểu cho một loạt các phần tử.

CSS là hướng đối tượng. ID nói ví dụ, lớp nói lớp.

Khi áp dụng CSS, hãy áp dụng nó cho một lớp và cố gắng tránh càng nhiều càng tốt cho một id. ID chỉ nên được sử dụng trong JavaScript để tìm nạp phần tử hoặc cho bất kỳ ràng buộc sự kiện nào.

Các lớp nên được sử dụng để áp dụng CSS.

Đôi khi bạn phải sử dụng các lớp để ràng buộc sự kiện. Trong các trường hợp như vậy, hãy cố gắng tránh các lớp đang được sử dụng để áp dụng CSS và thay vào đó thêm các lớp mới không có CSS ​​tương ứng. Điều này sẽ giúp ích khi bạn cần thay đổi CSS cho bất kỳ lớp nào hoặc thay đổi tất cả tên lớp CSS cho bất kỳ thành phần nào.

Không gian bộ chọn CSS thực sự cho phép kiểu id có điều kiện:

h1#my-id {color:red}
p#my-id {color:blue}

sẽ kết xuất như mong đợi. Tại sao bạn sẽ làm điều này? Đôi khi ID được tạo động, v.v. Một cách sử dụng khác là kết xuất các tiêu đề khác nhau dựa trên phân công ID cấp cao:

body#list-page #title {font-size:56px}
body#detail-page #title {font-size:24px}

Cá nhân, tôi thích bộ chọn tên lớp dài hơn:

body#list-page .title-block > h1 {font-size:56px}

như tôi thấy việc sử dụng ID lồng nhau để phân biệt điều trị là một chút sai lầm. Chỉ cần biết rằng là nhà phát triển trong Sass / SCSS thế giới nắm trong tay công cụ này, ID lồng nhau đang trở thành chuẩn mực.

Cuối cùng, khi nói đến hiệu suất của bộ chọn và quyền ưu tiên, ID có xu hướng chiến thắng. Đây là một chủ đề hoàn toàn khác.

Bất kỳ phần tử nào cũng có thể có một lớp hoặc một id.

Một lớp được sử dụng để tham chiếu một loại màn hình nhất định, ví dụ bạn có thể có một lớp css cho một div đại diện cho câu trả lời cho câu hỏi này. Vì sẽ có nhiều câu trả lời, nhiều div sẽ cần kiểu dáng giống nhau và bạn sẽ sử dụng một lớp.

Một id chỉ đề cập đến một yếu tố duy nhất, ví dụ phần liên quan ở bên phải có thể có kiểu dáng cụ thể cho nó không được sử dụng lại ở nơi khác, nó sẽ sử dụng một id.

Về mặt kỹ thuật, bạn có thể sử dụng các lớp cho tất cả, hoặc tách chúng ra một cách hợp lý. Tuy nhiên, bạn không thể sử dụng lại id cho nhiều yếu tố.

Lớp học là để áp dụng phong cách của bạn cho một nhóm các yếu tố. Kiểu ID chỉ áp dụng cho phần tử có ID đó (chỉ nên có một). Thông thường bạn sử dụng các lớp, nhưng nếu có một lần, bạn có thể sử dụng ID (hoặc chỉ cần dán thẳng kiểu vào phần tử).

Trong id phát triển nâng cao , về cơ bản chúng ta có thể sử dụng JavaScript.

Đối với các mục đích lặp lại, lớp es trở nên tiện dụng trái ngược với id được coi là duy nhất.

Dưới đây là một ví dụ minh họa các biểu thức trên:

<div id="box" class="box bg-color-red">this is a box</div>
<div id="box1" class="box bg-color-red">this is a box</div>

Bây giờ bạn có thể thấy ở đây box và box1là hai (2) <div>yếu tố khác nhau , nhưng chúng ta có thể áp dụng các lớp boxvà bg-color-redcho cả hai.

Khái niệm này là sự kế thừa trong một ngôn ngữ OOP .

1) id id không thể sử dụng lại và chỉ nên được áp dụng cho một phần tử của HTML trong khi lớp div có thể được thêm vào nhiều phần tử.

2) Một id có tầm quan trọng lớn hơn nếu cả hai được áp dụng cho cùng một yếu tố và có các kiểu xung đột, các kiểu của id sẽ được áp dụng.

3) Phần tử kiểu luôn tham chiếu một lớp div bằng cách đặt a. (dấu chấm) ở phía trước tên của họ trong khi lớp div id được gọi bằng cách đặt dấu # (băm) trước tên của họ.

4) Ví dụ: -

lớp <style>khai báo -.red-background { background-color: red; }

id trong <style>khai báo - #blue-background {background-color: blue;}

<div class="red-background" id="blue-background">Hello</div> Ở đây nền sẽ có màu xanh lam

idvà classlà hai thuộc tính HTML toàn cầu / tiêu chuẩn (Các thuộc tính toàn cầu bên dưới có thể được sử dụng trên bất kỳ thành phần HTML nào.)

class Chỉ định một hoặc nhiều tên lớp cho một thành phần (tham chiếu đến một lớp trong biểu định kiểu)

id Chỉ định id duy nhất cho một phần tử

Các thuộc tính id cung cấp một mã định danh duy nhất cho toàn bộ tài liệu trong đó thuộc tính lớp cung cấp cách phân loại các thành phần tương tự.

Giá trị thuộc tính id phải là duy nhất trên trang HTML nơi thuộc tính lớp có thể được sử dụng lại ở bất cứ nơi nào bạn muốn áp dụng cùng thuộc tính

Lớp được sử dụng cho nhiều thành phần có thuộc tính chung. Ví dụ: nếu bạn muốn cùng màu và phông chữ cho cả thẻ p và thẻ body sử dụng thuộc tính lớp hoặc trong chính phân chia.

Mặt khác, id được sử dụng để làm nổi bật một thuộc tính phần tử duy nhất và chỉ được sử dụng cho một phần tử cụ thể. Ví dụ: chúng tôi có thẻ h1 với một số thuộc tính, chúng tôi sẽ không muốn chúng lặp lại trong bất kỳ phần tử nào khác trên toàn trang.

Cần lưu ý rằng nếu chúng ta sử dụng cả lớp và id trong một phần tử, * id sẽ bỏ qua các thuộc tính của lớp. * Đơn giản vì id chỉ dành riêng cho một phần tử

Tham khảo ví dụ dưới đây

<html>
<head>
<style>
    #html_id{
        color:aqua;
        background-color: black;

    }
    .html_class{
        color:burlywood;
        background-color: brown;
    }
</style>

   </head>
    <body>
<p  class="html_class">Lorem ipsum dolor sit amet consectetur adipisicing 
   elit. 
    Perspiciatis a dicta qui unde veritatis cupiditate ullam quibusdam! 
     Mollitia enim, 
    nulla totam deserunt ex nihil quod, eaque, sed facilis quos iste.</p>
    </body>
   </html>

Chúng tôi tạo ra đầu ra

Đầu ra