Bộ chọn loại (đôi khi được gọi là Bộ chọn loại phần tử) khớp các phần tử với tên nút phần tử tương ứng, chẳng hạn như
,
và
các thẻ. Các bộ chọn loại thường được sử dụng để thực hiện các thay đổi "nét rộng" đối với kiểu của một trang web.
p ( /* "p" is the type selector */ margin: 0 0 1em 0; )
Cách sử dụng phổ biến
Thông thường, Bộ chọn loại được đặt làm mặc định, chẳng hạn như trong thiết lập lại CSS trong đó mục đích là ghi đè mặc định của trình duyệt. Một ví dụ từ dòng đầu tiên của normalize.css, một thiết lập lại CSS phổ biến:
article, aside, details, figcaption, figure, footer, header, main, nav, section, summary ( display: block; )
Bộ chọn Loại ở trên đang đặt thuộc tính hiển thị của các thẻ đó thành chặn, để bất kỳ lúc nào bất kỳ thẻ nào trong số đó được sử dụng trên toàn trang web, chúng sẽ hiển thị dưới dạng khối trừ khi bị ghi đè bởi một kiểu cụ thể hơn.
Thực hành tốt nhất
Thông thường, việc áp dụng các thay đổi chi tiết nhỏ chỉ với Bộ chọn loại được coi là thực hành kém. Ví dụ: việc áp dụng chung một thuộc tính “color: white” cho tất cả
các thẻ sẽ hiếm khi được sử dụng trên bất kỳ trang web nào. Điều này là do
các thẻ là chung và được sử dụng trên khắp các trang web cho các mục đích khác nhau.
Tuy nhiên, với Bộ chọn loại chẳng hạn body ( )
, việc đặt mặc định font-size
và line-height
phổ biến. Điều này một phần là do chỉ có thể có một thẻ trên bất kỳ trang nhất định nào, do đó, có ít cơ hội xung đột hơn.
Loại Đặc tính và Hiệu suất của Bộ chọn
Bộ chọn loại nằm ở mức thấp nhất của thác độ cụ thể (thường được viết là 0, 0, 0, 1), có nghĩa là hầu hết mọi thứ sẽ ghi đè kiểu được áp dụng chỉ qua Bộ chọn loại và thêm Bộ chọn loại vào một lớp hoặc ID trong CSS của bạn cung cấp tính cụ thể bổ sung tối thiểu.
Bộ chọn loại cũng xếp hạng thấp hơn trên thang đo hiệu quả CSS so với các lớp và ID. Do đó, về mặt kỹ thuật, lựa chọn hiệu suất tốt hơn là sử dụng một lớp hoặc một ID thay vì Bộ chọn Loại chung chung hơn (mặc dù sự khác biệt về tốc độ thực thường không đáng kể).
Hỗ trợ trình duyệt
Trình duyệt Chrome | Safari | Firefox | Opera | I E | Android | iOS |
---|---|---|---|---|---|---|
Bất kì | Bất kì | Bất kì | Bất kì | Bất kì | Bất kì | Bất kì |