Khi so sánh class CSS với ID, sự khác biệt là class CSS áp dụng một kiểu cho nhiều phần tử. Mặt khác, ID áp dụng một style cho một phần tử duy nhất. ID cũng đặc biệt ở chỗ bạn có thể sử dụng một URL đặc biệt để liên kết trực tiếp đến một phần tử và nó được JavaScript sử dụng.
Trong CSS, selectors được sử dụng để nhắm mục tiêu một phần tử cụ thể hoặc nhiều phần tử trên trang web. Khi một phần tử đã được nhắm mục tiêu, một kiểu hoặc tập hợp các kiểu có thể được áp dụng cho phần tử.
Có một loạt các selectors có sẵn. Hai trong số phổ biến nhất được sử dụng là class và ID. Cả hai đều được sử dụng để nhắm mục tiêu các yếu tố mà một kiểu sẽ được áp dụng.
Các bài viết liên quan:
Class CSS so với selectors ID
Sự khác biệt giữa selectors class và ID là gì? Đây là một câu hỏi được hỏi bởi nhiều nhà phát triển mới làm quen với CSS và một câu hỏi mà chúng tôi sẽ trả lời trong hướng dẫn này.
Khi đọc xong hướng dẫn này, bạn sẽ biết sự khác biệt giữa hai selectors này. Bạn sẽ có thông tin cần thiết để đưa ra quyết định sáng suốt về việc sử dụng công cụ chọn nào trong mã của mình. Bắt đầu nào.
Xem thêm CSS selectors nâng cao
Selectors CSS
Khi thiết kế một trang web, bạn sẽ muốn các style nhất định áp dụng cho các phần tử cụ thể trên trang. Ví dụ: bạn có thể muốn đặt màu văn bản của tất cả các thẻ <p> thành màu xanh lục hoặc thay đổi kích thước phông chữ của tiêu đề.
Selectors cho phép bạn nhắm mục tiêu các phần tử cụ thể trên trang web mà bạn có thể áp dụng các kiểu. Trong CSS, có sẵn nhiều selectors, chẳng hạn như selectors phổ quát, selectors con, selectors con và selectors nhóm. Nếu bạn muốn tìm hiểu thêm về selectors CSS, hãy đọc hướng dẫn dành cho người mới bắt đầu của chúng tôi về selectors CSS.
Hai selectors, class và id, được sử dụng để áp dụng kiểu cho các phần tử dựa trên class và ID được gán cho một phần tử HTML, tương ứng. Nhưng những selectors này thường bị nhầm lẫn, vì vậy hãy cùng khám phá cách hoạt động của từng bộ.
Selectors ID là duy nhất
Selectors id cho phép bạn xác định các quy tắc kiểu áp dụng cho một phần tử duy nhất trên trang web. Mỗi trang web chỉ có thể có một phần tử với một thuộc tính ID duy nhất. Điều này có nghĩa là selectors ID không bao giờ có thể được sử dụng để tạo kiểu cho nhiều phần tử.
Xem thêm OOP( hướng đối tượng) trong R
selectors ID được xác định bằng cách sử dụng dấu thăng. Ngay sau đó là giá trị ID mà bạn muốn áp dụng một bộ quy tắc kiểu. Dưới đây là một ví dụ về công cụ chọn ID đang hoạt động:
<html>
<p id="betaBanner">banner website</p>
<style>
#betaBanner {
color: white;
background-color: orange;
}
Kiểu này áp dụng cho phần tử <p> trong tài liệu HTML của chúng tôi với ID betaBanner. Kiểu sẽ đặt màu nền của phần tử thành màu cam và màu của văn bản trong phần tử thành màu trắng.
Selectors class không phải là duy nhất
Selectors class cho phép bạn xác định các quy tắc kiểu áp dụng cho bất kỳ phần tử nào có thuộc tính class bằng một giá trị nhất định.
Như chúng ta đã thảo luận trước đó, selectors ID chỉ có thể được sử dụng để tạo kiểu cho một phần tử. Điều này là do ID chỉ có thể được sử dụng một lần trên một trang web. Mặt khác, các class có thể được sử dụng trên nhiều phần tử. Vì vậy, nếu bạn áp dụng một kiểu bằng cách sử dụng selectors lớp, bất kỳ phần tử nào chia sẻ class đó sẽ tuân theo các kiểu bạn xác định.
selectors class được xác định bằng dấu chấm, theo sau là giá trị của class mà bạn muốn áp dụng một tập hợp kiểu. Dưới đây là một ví dụ về công cụ chọn class đang hoạt động:
<html>
<p class="orangeBackground">đây là banner.</p>
<div class="orangeBackground">đây là banner.</div>
<style>
.orangeBackground {
background-color: orange;
}
Kiểu này đặt màu nền của thẻ <p> của chúng tôi thành màu cam. Ngoài ra, kiểu đặt màu nền của thẻ <div> của chúng tôi thành màu cam. Điều này là do cả hai thẻ chia sẻ cùng một tên lớp: orangeBackground.
Ngoài ra, một phần tử web có thể chia sẻ nhiều class khác nhau. Vì vậy, nếu chúng tôi muốn áp dụng một class được gọi là lớn cho thẻ <div> ở trên, chúng tôi có thể làm như vậy bằng cách sử dụng mã này:
<div class = "orangeBackground Large"> Đây là biểu ngữ. </div>
Trong đoạn code này, bất kỳ quy tắc kiểu nào được xác định cho class OrangeBackground và các class lớn đều được áp dụng cho phần tử web của chúng tôi. Mặt khác, với một ID, chúng tôi không thể sao chép hành vi này, bởi vì mỗi phần tử chỉ có thể có một ID.
Xem thêm Model class trong Keras
ID có một chức năng trình duyệt duy nhất
Cho đến nay, chúng ta đã thảo luận về thực tế là ID chỉ có thể áp dụng kiểu cho một phần tử. Không giống như các class có thể áp dụng kiểu cho nhiều phần tử. Đây không phải là sự khác biệt duy nhất giữa selectors class và ID.
Trong trình duyệt, các class không có chức năng đặc biệt. Mục đích chính của chúng là cho phép bạn áp dụng các kiểu cho một loạt các phần tử trên một trang web. Mặt khác, ID có thể được trình duyệt sử dụng để điều hướng đến một phần nhất định của trang web.
Nếu bạn gán ID cho một phần tử, bạn có thể sử dụng một URL đặc biệt để liên kết trực tiếp đến phần tử đó. Hành vi này hoạt động vì ID là duy nhất trên một trang web.
Giả sử chúng tôi muốn gửi một liên kết đến trang web của chúng tôi để người dùng tự động cuộn đến một tiêu đề. Chúng tôi có thể làm như vậy bằng cách sử dụng mã này:
<h3 id = "section3"> section 3 </h3>
Trong mã này, chúng tôi đã gán một ID cho thẻ <h3> có chứa văn bản Phần Ba. Bây giờ, chúng tôi có thể gửi cho người dùng một liên kết trực tiếp cuộn họ đến phần tử đó trên trang web. Điều này được thực hiện bằng cách sử dụng URL sau:
https://domain.com/index.html#section3
Khi người dùng điều hướng đến URL này, (trong đó domain.com là URL của trang web của bạn), họ sẽ cuộn đến tiêu đề có phần ID3. Hành vi này không áp dụng cho các class học.
Xem thêm Kiểm tra lỗ hổng bảo mật Exposed Session Variables
ID được sử dụng bởi JavaScript
Nếu bạn có kinh nghiệm sử dụng JavaScript, bạn sẽ biết rằng ID thường được sử dụng trong ngôn ngữ lập trình đó. Hàm getElementById cho phép bạn chọn một phần tử trên trang web. Nó dựa trên thực tế là chỉ một phần tử có thể chia sẻ cùng một ID.
Mặt khác, các class có thể phản ánh nhiều yếu tố trên một trang web. Chúng sẽ không hữu ích nếu bạn muốn làm việc với một phần tử cụ thể trong JavaScript.
Bạn có thể sử dụng cả selectors class ID và CSS
Không có quy tắc nào trong HTML ngăn bạn gán một phần tử cả ID và một lớp.
Giả sử bạn muốn áp dụng các kiểu được liên kết với một class được gọi là backgroundOrange cho thẻ <div>. Tuy nhiên, bạn cũng muốn áp dụng một vài kiểu duy nhất cho <div>. Bạn có thể làm như vậy bằng cách sử dụng mã này:
<div class = "backgroundOrange" id = "customDiv"> </div>
Thẻ <div> này sẽ phụ thuộc vào các kiểu cho backgroundOrange của lớp. Ngoài ra, nó cũng sẽ sử dụng các kiểu được áp dụng cho ID customDiv bằng selectors ID.
Phần kết luận
Khi bạn đang làm việc với CSS, không có lý do cụ thể nào buộc bạn phải sử dụng ID trên một lớp. Tuy nhiên, cách tốt nhất là chỉ sử dụng ID nếu bạn muốn một kiểu áp dụng cho một phần tử trên trang web và sử dụng các class nếu bạn muốn một kiểu áp dụng cho nhiều phần tử.
Trong hướng dẫn này, chúng tôi đã thảo luận, với tham chiếu đến các ví dụ, khái niệm cơ bản về ID CSS và selectors lớp, đồng thời chúng tôi đã so sánh và đối chiếu hai loại. Bây giờ, bạn đã sẵn sàng để bắt đầu sử dụng CSS ID và selectors class như một nhà phát triển chuyên nghiệp!
Xem thêm Sequential Class trong Keras
