Bộ chọn trong CSS là một phần của bộ quy tắc CSS và được sử dụng để chọn nội dung chúng tôi muốn tạo kiểu. Cả id và class đều là bộ chọn phần tử CSS và được sử dụng để xác định một phần tử dựa trên tên được chỉ định của nó. Bộ chọn lớp và id CSS là bộ chọn được sử dụng nhiều nhất trong CSS

Trong quá trình sử dụng selector đôi khi xảy ra nhầm lẫn giữa id và class. Cả hai đều không có bất kỳ thông tin kiểu dáng mặc định nào; . Mặc dù cả hai đều được sử dụng để chọn phần tử, nhưng chúng khác nhau theo nhiều cách

Sự khác biệt giữa id và lớp được lập bảng như sau

ClassIdChúng tôi có thể áp dụng một lớp cho các phần tử khác nhau để có thể có nhiều lần trên một trang. Id là duy nhất trong một trang và chúng tôi chỉ có thể áp dụng nó cho một thành phần cụ thể. Lớp được gán cho một phần tử và tên của nó bắt đầu bằng ". " theo sau là tên của lớp. Tên của Id bắt đầu bằng ký hiệu "#" theo sau là tên id duy nhất. Chúng ta có thể đính kèm nhiều bộ chọn lớp vào một phần tử. Chúng tôi chỉ có thể đính kèm một bộ chọn ID vào một phần tử. cú pháp.
. class{
// khai báo CSS
}Cú pháp.
#id{
// khai báo CSS
}

Hãy thảo luận riêng về id và lớp

Bộ chọn ID

Bộ chọn id được sử dụng để chọn thuộc tính id của phần tử HTML để chọn một phần tử cụ thể. Một id luôn là duy nhất trong trang, do đó, nó được chọn để chọn một phần tử duy nhất, duy nhất

Nó được viết bằng ký tự băm (#), theo sau là id của phần tử

Ví dụ về bộ chọn id được đưa ra như sau

Thí dụ

Trong ví dụ này, chúng tôi đang chọn phần tử có id "para"

Kiểm tra nó ngay bây giờ

đầu ra

Bộ chọn lớp

Bộ chọn lớp được sử dụng để chọn các phần tử HTML có thuộc tính lớp cụ thể. Nó được viết với một ký tự dấu chấm. (ký hiệu dừng hoàn toàn) theo sau là tên lớp

Ghi chú. Tên lớp không được bắt đầu bằng số

Ví dụ về bộ chọn lớp được đưa ra như sau

Thí dụ

Trong ví dụ này, chúng tôi đang chọn các phần tử có lớp "ví dụ"

Kiểm tra nó ngay bây giờ

đầu ra

Bộ chọn lớp CSS cho một phần tử cụ thể

Chúng ta cũng có thể tạo kiểu cho phần tử cụ thể bằng cách sử dụng bộ chọn lớp, bất kể nó có được áp dụng cho các phần tử khác nhau hay không

Nếu chúng ta cần chỉ định rằng chỉ một phần tử HTML cụ thể sẽ bị ảnh hưởng, chúng ta phải sử dụng tên phần tử với bộ chọn lớp

Qua ví dụ sau sẽ rõ

Thí dụ

Kiểm tra nó ngay bây giờ

đầu ra

Có một ví dụ khác trong đó chúng ta áp dụng nhiều lớp trên cùng một phần tử. Hãy xem một minh họa tương tự

Thí dụ

Trong ví dụ này, chúng tôi đang sử dụng hai lớp (ví dụ và para) trên thành phần đoạn văn và tạo kiểu cho đoạn văn bằng cả hai lớp

Chúng tôi cần các cách để mô tả nội dung trong tài liệu HTML/XHTML. Các phần tử cơ bản như

,

0 và

1 thường sẽ thực hiện công việc, nhưng bộ thẻ cơ bản của chúng tôi không bao gồm mọi loại phần tử trang hoặc lựa chọn bố cục có thể có. Đối với điều này, chúng tôi cần ID và Lớp học. Ví dụ:

2, điều này sẽ cho chúng tôi cơ hội nhắm mục tiêu danh sách không có thứ tự này một cách cụ thể, để chúng tôi có thể thao tác nó một cách duy nhất với các danh sách không có thứ tự khác trên trang của chúng tôi. Hoặc chúng tôi có thể có một phần trên trang của chúng tôi không có thẻ liên quan để biểu thị nó, ví dụ: chân trang, nơi chúng tôi có thể làm điều gì đó như thế này.

0. Hoặc có lẽ chúng tôi có các hộp trong thanh bên để giữ nội dung ở đó được phân tách theo một cách nào đó.

1

Các ID và Lớp này là các “móc nối” mà chúng ta cần xây dựng thành phần đánh dấu để có được chúng. Rõ ràng là CSS cần những thứ này để chúng ta có thể xây dựng bộ chọn và tạo kiểu, nhưng các ngôn ngữ web khác như JavaScript cũng phụ thuộc vào chúng. Nhưng sự khác biệt giữa chúng là gì?

ID là duy nhất

• Mỗi phần tử chỉ có thể có một ID
• Mỗi trang chỉ có thể có một phần tử với ID đó

Khi tôi lần đầu tiên học những thứ này, tôi đã nghe đi nghe lại rằng bạn chỉ nên sử dụng ID một lần, nhưng bạn có thể sử dụng các lớp nhiều lần. Về cơ bản, nó lọt vào tai này và chui ra tai kia vì đối với tôi, nó giống như một “quy tắc ngón tay cái” tốt hơn là một điều gì đó cực kỳ quan trọng. Nếu bạn hoàn toàn là một người HTML/CSS, thái độ này có thể tồn tại bởi vì đối với bạn, họ thực sự dường như không làm điều gì khác biệt

Đây là một. mã của bạn sẽ không vượt qua xác thực nếu bạn sử dụng cùng một ID trên nhiều phần tử. Xác thực phải quan trọng đối với tất cả chúng ta, vì vậy chỉ riêng điều đó đã là một điều lớn. Chúng tôi sẽ xem xét thêm các lý do cho sự độc đáo khi chúng tôi tiếp tục

Các lớp không phải là duy nhất

• Bạn có thể sử dụng cùng một lớp trên nhiều phần tử
• Bạn có thể sử dụng nhiều lớp trên cùng một phần tử

Mọi thông tin kiểu dáng cần được áp dụng cho nhiều đối tượng trên một trang phải được thực hiện với một lớp. Lấy ví dụ một trang có nhiều “widget”

Giờ đây, bạn có thể sử dụng tên lớp “tiện ích con” làm móc nối của mình để áp dụng cùng một bộ kiểu dáng cho từng cái trong số này. Nhưng nếu bạn cần một trong số chúng lớn hơn cái còn lại, nhưng vẫn chia sẻ tất cả các thuộc tính khác thì sao?

Không cần tạo một tên lớp hoàn toàn mới ở đây, chỉ cần áp dụng một lớp mới ngay trong thuộc tính lớp. Các lớp này được phân định bằng dấu cách và hầu hết các trình duyệt đều hỗ trợ bất kỳ số lượng nào trong số chúng (thực tế, nó giống như hàng nghìn, nhưng nhiều hơn mức bạn cần)

Không có giá trị mặc định của trình duyệt cho bất kỳ ID hoặc Lớp nào

Theo mặc định, việc thêm tên lớp hoặc ID vào một phần tử sẽ không ảnh hưởng gì đến phần tử đó

Đây là điều khiến tôi khó chịu khi mới bắt đầu. Bạn đang làm việc trên một trang web và phát hiện ra rằng việc áp dụng một tên lớp cụ thể sẽ khắc phục sự cố mà bạn đang gặp phải. Sau đó, bạn chuyển sang một trang web khác có vấn đề tương tự và cố gắng sửa nó với cùng tên lớp đó vì nghĩ rằng bản thân tên lớp có một số thuộc tính kỳ diệu chỉ để phát hiện ra rằng nó không hoạt động

Các lớp và ID không có bất kỳ thông tin kiểu dáng nào đối với chúng. Chúng yêu cầu CSS để nhắm mục tiêu chúng và áp dụng kiểu dáng

Mã vạch và số sê-ri

Có lẽ một sự tương tự tốt ở đây là mã vạch và số sê-ri. Lấy một chiếc iPod trong một cửa hàng. Trên bao bì sẽ có mã vạch. Điều này cho cửa hàng biết sản phẩm là gì, vì vậy khi được quét, hệ thống sẽ biết chính xác sản phẩm là gì và giá của nó là bao nhiêu. Nó thậm chí có thể biết nó có màu gì hoặc nó được giữ ở đâu trong cửa hàng. Tất cả iPod cùng loại này đều có cùng một mã vạch trên chúng

iPod cũng sẽ có một số sê-ri trên đó, số này hoàn toàn độc nhất đối với bất kỳ iPod nào khác (hoặc bất kỳ thiết bị nào khác) trên thế giới. Số sê-ri không biết giá. Có thể, nhưng đối với cửa hàng thì đây không phải là cách hiệu quả để lưu trữ và sử dụng dữ liệu đó. Sử dụng mã vạch dễ dàng hơn nhiều, vì vậy, ví dụ: nếu giá thay đổi, bạn chỉ có thể thay đổi giá cho mã vạch đó chứ không phải từng số sê-ri riêng lẻ trong hệ thống của mình

Điều này giống như ID và Lớp học. Thông tin có thể sử dụng lại nên được lưu giữ trong một lớp và thông tin hoàn toàn duy nhất nên được lưu giữ trong một ID

ID có chức năng trình duyệt đặc biệt

Các lớp không có khả năng đặc biệt trong trình duyệt, nhưng ID có một mẹo rất quan trọng trong tay áo của chúng. Đây là "giá trị băm" trong URL. Nếu bạn có một URL như http. //tên miền của bạn. com#comments, trình duyệt sẽ cố gắng định vị phần tử có ID là “bình luận” và sẽ tự động cuộn trang để hiển thị phần tử đó. Điều quan trọng cần lưu ý ở đây là trình duyệt sẽ cuộn bất kỳ phần tử nào nó cần để hiển thị phần tử đó, vì vậy nếu bạn đã làm điều gì đó đặc biệt như vùng DIV có thể cuộn trong phần thân thông thường của bạn, thì div đó cũng sẽ được cuộn.

Đây là một lý do quan trọng ngay tại đây tại sao ID phải hoàn toàn độc nhất lại quan trọng. Vì vậy, trình duyệt của bạn biết nơi để cuộn

Các phần tử có thể có CẢ HAI

Không có gì ngăn cản bạn có cả ID và Class trên một phần tử. Trên thực tế, nó thường là một ý tưởng rất hay. Lấy ví dụ đánh dấu mặc định cho mục danh sách nhận xét WordPress

Nó có một lớp được áp dụng cho nó mà bạn có thể muốn tạo kiểu cho tất cả các nhận xét trên trang, nhưng nó cũng có một giá trị ID duy nhất (được tạo động bởi WordPress, khá độc đáo). Giá trị ID này hữu ích cho liên kết trực tiếp. Bây giờ tôi có thể liên kết trực tiếp đến một nhận xét cụ thể trên một trang cụ thể một cách dễ dàng

CSS không quan tâm

Về CSS, không có gì bạn có thể làm với ID mà bạn không thể làm với Class và ngược lại. Tôi nhớ khi lần đầu tiên tôi học CSS và tôi đã gặp một vấn đề, đôi khi tôi sẽ thử và khắc phục sự cố bằng cách chuyển đổi xung quanh các giá trị này. Không. CSS không quan tâm

JavaScript quan tâm

Người JavaScript có lẽ đã đồng điệu hơn với sự khác biệt giữa các lớp và ID. JavaScript phụ thuộc vào việc chỉ có một phần tử trang với bất kỳ

2 cụ thể nào, nếu không, hàm

3 thường được sử dụng sẽ không đáng tin cậy. Đối với những người quen thuộc với jQuery, bạn sẽ biết việc thêm và xóa các lớp vào các phần tử trang dễ dàng như thế nào. Nó là một chức năng gốc và tích hợp sẵn của jQuery. Lưu ý rằng không có chức năng như vậy tồn tại cho ID. JavaScript không có trách nhiệm thao túng các giá trị này, nó sẽ gây ra nhiều vấn đề hơn mức đáng có

Nếu bạn không cần chúng, đừng sử dụng chúng

Như bạn có thể thấy, các lớp và ID rất quan trọng và chúng tôi dựa vào chúng hàng ngày để thực hiện thao tác tạo kiểu và trang mà chúng tôi cần thực hiện. Tuy nhiên, bạn nên sử dụng chúng một cách thận trọng và đúng ngữ nghĩa

Điều này có nghĩa là tránh những thứ như thế này

CSS-Tricks.com

Chúng ta đã biết phần tử này là một liên kết, nó là một phần tử neo. Ở đây không có nhu cầu cụ thể để áp dụng một lớp, vì chúng ta đã có thể áp dụng kiểu dáng thông qua thẻ của nó

Cũng nên tránh điều này

________số 8

ID được sử dụng phù hợp ở đây vì trang có thể sẽ chỉ có một cột bên phải, nhưng tên không phù hợp. Hãy thử và mô tả ngữ cảnh của phần tử, không phải vị trí của phần tử đó hoặc phần tử đó trông như thế nào. ID ở đây là “thanh bên” sẽ phù hợp hơn

Microformats chỉ là tên lớp cụ thể

Nghĩ rằng vi định dạng là trên đầu của bạn? . Chúng chỉ là phần đánh dấu thông thường sử dụng tên lớp được tiêu chuẩn hóa cho thông tin mà chúng chứa. Kiểm tra một vCard tiêu chuẩn

Sự khác biệt giữa id và lớp trong HTML là gì?

Lớp trong HTML là gì?

Id trong HTML là gì?

Tôi có thể sử dụng ID và lớp trong HTML không?