Các bộ chọn lớp và id được sử dụng để chọn các phần tử trên một trang web trong CSS. Trên Career Karma, hãy tìm hiểu sự khác biệt giữa CSS ID và class.

Bạn đang xem : id hoặc lớp css

James Gallagher
– Ngày 29 tháng 12 năm 2020

Khi so sánh lớp CSS với ID, sự khác biệt là lớp CSS áp dụng một kiểu cho nhiều phần tử. Mặt khác, ID áp dụng một phong cách 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

, bộ chọn đượ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 bộ chọn có sẵn. Hai trong số những cách phổ biến nhất được sử dụng là

lớp



TÔI

. Cả hai đều được sử dụng để nhắm mục tiêu các phần tử mà một kiểu sẽ được áp dụng.

Tìm kết hợp Bootcamp của bạn

  • Career Karma phù hợp với bạn với những chiến dịch khởi động công nghệ hàng đầu
  • Nhận học bổng độc quyền và các khóa học luyện thi

Chọn sở thích của bạn

Họ

Họ

E-mail

Số điện thoại

Bằng cách tiếp tục, bạn đồng ý với

Điều khoản dịch vụ



Chính sách bảo mật

, và bạn đồng ý nhận các đề nghị và cơ hội từ Career Karma qua điện thoại, tin nhắn văn bản và email.

Lớp CSS so với Bộ chọn ID

Sự khác biệt giữa

lớp



TÔI

bộ chọn? Đâ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 bộ chọn 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 bộ chọn nào trong mã của mình. Bắt đầu nào.

Bộ chọn CSS

Khi nào

thiết kế một trang web

, bạn sẽ muốn các kiểu 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ả & lt; p & gt; chuyển sang màu xanh lục hoặc thay đổi kích thước phông chữ của tiêu đề.

Bộ chọn cho phép bạn nhắm mục tiêu các phần tử cụ thể trên một trang web mà bạn có thể áp dụng các kiểu. Trong CSS, có sẵn nhiều bộ chọn, chẳng hạn như bộ chọn phổ quát, bộ chọn con, bộ chọn con và bộ chọn nhóm. Nếu bạn muốn tìm hiểu thêm về bộ chọn CSS, hãy đọc hướng dẫn dành cho người mới bắt đầu của chúng tôi để

Bộ chọn CSS

.

Hai bộ chọn,

lớp



Tôi

, được sử dụng để áp dụng kiểu cho các phần tử dựa trên lớp và ID được gán cho một phần tử HTML tương ứng. Nhưng những bộ chọn 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ộ.

Bộ chọn ID là duy nhất

Bộ chọn id cho phép bạn xác định các quy tắc kiểu áp dụng cho

Độc thân

phần 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

. Điều này có nghĩa là bộ chọn ID không bao giờ có thể được sử dụng để tạo kiểu cho nhiều phần tử.

Bộ chọn ID được xác định bằng dấu thăng. Ngay sau chúng 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:

 & lt; html & gt;

& lt; p id = "betaBanner" & gt; Đây là biểu ngữ. & lt; / p & gt;

& lt; phong cách & gt;

#betaBanner {
màu trắng;
background-color: cam;
} 

Kiểu này áp dụng cho & lt; p & gt; 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.

Bộ chọn lớp không phải là duy nhất

Bộ chọn lớp cho phép bạn xác định các quy tắc kiểu áp dụng cho

bất kỳ yếu tố nào

với một thuộc tính lớp bằng một giá trị nhất định.

Như chúng ta đã thảo luận trước đó, bộ chọn 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 lớp 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 bộ chọn lớp, bất kỳ phần tử nào chia sẻ lớp đó sẽ tuân theo các kiểu bạn xác định.

Bộ chọn lớp được xác định bằng dấu chấm, theo sau là giá trị của lớp 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 lớp đang hoạt động:

“Sự nghiệp Karma bước vào cuộc đời tôi khi tôi cần nó nhất và nhanh chóng giúp tôi bắt kịp với một chiến lược gia khởi nghiệp. Hai tháng sau khi tốt nghiệp, tôi đã tìm được công việc mơ ước phù hợp với giá trị và mục tiêu của tôi trong cuộc sống!”

Venus, Kỹ sư phần mềm tại Rockbot

 & lt; html & gt;

& lt; p class = "orangeBackground" & gt; Đây là biểu ngữ. & lt; / p & gt;
& lt; div class = "orangeBackground" & gt; Đây là biểu ngữ. & lt; / div & gt;

& lt; phong cách & gt;

.orangeBackground {
background-color: cam;
} 

Kiểu này đặt màu nền của & lt; p & gt; từ khóa sang màu cam. Ngoài ra, kiểu đặt màu nền của & lt; div & gt; từ khóa sang 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 lớp khác nhau. Vì vậy, nếu chúng tôi muốn áp dụng một lớp được gọi là

lớn

cho & lt; div & gt; , chúng tôi có thể làm như vậy bằng cách sử dụng mã này:

 & lt; html & gt;

& lt; div class = "orangeBackground Large" & gt; Đây là biểu ngữ. & lt; / div & gt; 

Trong mã này, bất kỳ quy tắc kiểu nào được xác định cho

màu cam



lớn

các lớp đượ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.

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 lớp 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 bộ chọn lớp và ID.

Trong trình duyệt, các lớp 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:

 & lt; h3 id = "section3" & gt; Phần Ba & lt; / h3 & gt; 

Trong mã này, chúng tôi đã chỉ định một ID cho & lt; h3 & gt; thẻ 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, (nơi

domain.com

là URL của trang web của bạn), họ sẽ cuộn đến tiêu đề có ID

section3

. Hành vi này không áp dụng cho các lớp học.

ID được sử dụng bởi JavaScript

Nếu bạn có bất kỳ 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 lớp 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ả bộ chọn lớp 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 lớp được gọi là

backgroundOrange

tới & lt; div & gt; nhãn. Tuy nhiên, bạn cũng muốn áp dụng một vài kiểu độc đáo cho & lt; div & gt ;. Bạn có thể làm như vậy bằng cách sử dụng mã này:

 & lt; div class = "backgroundOrange" id = "customDiv" & gt; & lt; / div & gt; 

Đây & lt; div & gt; thẻ sẽ tùy thuộc vào các kiểu cho lớp

backgroundOrange

. Ngoài ra, nó cũng sẽ sử dụng các kiểu được áp dụng cho

customDiv

ID bằng bộ chọn ID.

Sự 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 lớp 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ụ, các khái niệm cơ bản về ID CSS và bộ chọn lớp, đồng thời chúng tôi đã so sánh và đối chiếu hai điều này. Bây giờ, bạn đã sẵn sàng để bắt đầu sử dụng CSS ID và bộ chọn lớp như một chuyên gia

người phát triển

!


Xem thêm những thông tin liên quan đến chủ đề id hoặc lớp css

10 CSS Class ID

  • Tác giả: FollowAndrew
  • Ngày đăng: 2014-06-13
  • Đánh giá: 4 ⭐ ( 8677 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Learn about the difference between classes and ID selectors in CSS

Các lớp và ID: Không có độc quyền CSS

  • Tác giả: helpex.vn
  • Đánh giá: 5 ⭐ ( 2389 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Khi đọc về các lớp và ID ngày nay, bạn sẽ bắt đầu tin rằng chúng được phát minh dành riêng cho nhắm mục tiêu CSS và JS. Đến mức CSS và JS thực sự ra lệnh cho các quy tắc sử dụng các lớp và…

Bộ Chọn CSS Là Gì, Cú Pháp Các Loại Bộ Chọn CSS

  • Tác giả: www.codehub.com.vn
  • Đánh giá: 3 ⭐ ( 2178 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bộ chọn CSS được sử dụng để chọn ra phần tử HTML trên trang. Trong bài học này chúng ta sẽ tìm hiểu về các bộ chọn CSS phổ biến như Bộ Chọn Phần Tử, Bộ Chọn ID, Bộ Chọn Lớp hay Class và Bộ Chọn Con Cháu.

Bài 5: Phân biệt class và id trong html và css

  • Tác giả: goclamweb.com
  • Đánh giá: 3 ⭐ ( 1645 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Sau khi tìm hiểu các thêm định dạng css vào các thẻ html, chúng ta sẽ tìm hiểu cách phân biệt class và id cũng như công dụng của chúng trong việc kiểm soát và đinh danh các thẻ html. Giúp cho việc code html và css dễ kiểm tra, chỉnh sửa hơn.

ID và Class trong CSS, điều khác biệt

  • Tác giả: websitehcm.com
  • Đánh giá: 3 ⭐ ( 5483 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: ID và Class trong CSS, điều khác biệt w3seo tìm hiểu về id và class trong CSS selector, cách định dạng css cho id và class

Thuộc tính ID và Lớp trong HTML và Bộ chọn CSS của chúng

  • Tác giả: vn.wsxdn.com
  • Đánh giá: 3 ⭐ ( 4396 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Phân biệt ID và Class, chúng giống và khác nhau như thế nào trong CSS, cái này mà bạn không nắm rõ là dở đấy!

  • Tác giả: freehost.page
  • Đánh giá: 5 ⭐ ( 6309 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Hơn 60 mẫu biểu mẫu HTML miễn phí để sao chép và sử dụng - mẫu biểu mẫu đăng ký html

By ads_php