Selectors — class and id · Bộ chọn — class và id
This page needs a recent browser (with SharedArrayBuffer support). Please update Chrome, Edge, Firefox or Safari to the latest version. · Trang này cần trình duyệt gần đây (hỗ trợ SharedArrayBuffer). Vui lòng cập nhật Chrome, Edge, Firefox hoặc Safari lên phiên bản mới nhất.
English
Three kinds of selector
- A selector says which elements a rule changes.
- By tag:
p { ... }changes every<p>. - That is the kind you used last lesson.
Tiếng Việt
Ba loại bộ chọn
- Một bộ chọn xác định phần tử nào mà một luật sẽ thay đổi.
- Theo thẻ:
p { ... }thay đổi mọi<p>. - Đó là loại bạn đã dùng trong bài học trước.
English
By class and by id
- By class:
.note { ... }changes every element withclass="note". A dot.means class. - By id:
#title { ... }changes the one element withid="title". A hash#means id. - A class can be on many elements; an id should be on one.
Tiếng Việt
Theo lớp và theo id
- Theo lớp:
.note { ... }thay đổi mọi phần tử cóclass="note". Dấu chấm.có nghĩa là lớp. - Theo id:
#title { ... }thay đổi một phần tử duy nhất cóid="title". Ký hiệu hash#có nghĩa là id. - Một lớp có thể áp dụng cho nhiều phần tử; một id chỉ nên áp dụng cho một phần tử.
<style>
.note { color: green; }
#title { color: purple; }
</style>
<h1 id="title">My page</h1>
<p class="note">This is a note.</p>
<p>This is normal.</p>
English
Common mistakes
- A class selector starts with
., an id selector with#. - Reuse a class on many elements; an id appears once per page.
Tiếng Việt
Lỗi thường gặp
- Bộ chọn lớp bắt đầu bằng
., bộ chọn id bắt đầu bằng#. - Tái sử dụng lớp cho nhiều phần tử; id chỉ xuất hiện một lần trên mỗi trang.
English
Now you try
- Match the dot
.to a class, and the hash#to an id. - Style a class, then style an id.
Tiếng Việt
Bây giờ bạn thử
- Gắn dấu chấm
.với lớp, và ký hiệu hash#với id. - Tạo kiểu cho lớp, sau đó tạo kiểu cho id.
Style the note. Add a rule for the note class: .note { color: green; } (a dot means class). · Tạo phong cách cho ghi chú. Thêm một quy tắc cho lớp note: .note { color: green; } (dấu chấm nghĩa là class).
Style the title. Add a rule for the title id: #title { color: purple; } (a hash means id). · Tạo phong cách cho tiêu đề. Thêm một quy tắc cho id title: #title { color: purple; } (dấu hash nghĩa là id).