Class selectors
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Bộ chọn lớp CSS khớp các phần tử dựa trên nội dung của thuộc tính class của chúng.
css
/* All elements with class="spacious" */
.spacious {
margin: 2em;
}
/* All <li> elements with class="spacious" */
li.spacious {
margin: 2em;
}
/* All <li> elements with a class list that includes both "spacious" and "elegant" */
/* For example, class="elegant retro spacious" */
li.spacious.elegant {
margin: 2em;
}
Cú pháp
css
.class_name {
/* … */
}
Lưu ý rằng điều này tương đương với bộ chọn thuộc tính sau:
css
[class~="class_name"] {
/* … */
}
Giá trị class_name phải là một định danh CSS hợp lệ. Các thuộc tính class HTML không phải là định danh CSS hợp lệ phải được thoát ký tự trước khi có thể dùng trong bộ chọn lớp.
Ví dụ
Bộ chọn lớp hợp lệ
HTML
html
<p class="red">This paragraph has red text.</p>
<p class="red yellow-bg">
This paragraph has red text and a yellow background.
</p>
<p class="red fancy">This paragraph has red text and "fancy" styling.</p>
<p>This is just a regular paragraph.</p>
html
<!-- The next two paragraphs have class attributes
that contain characters which must be escaped in CSS -->
<p class="item?one">This paragraph has a pink background.</p>
<p class="123item">This paragraph has a yellow background.</p>
CSS
css
.red {
color: #ff3333;
}
.yellow-bg {
background: #ffffaa;
}
.fancy {
font-weight: bold;
text-shadow: 4px 4px 3px #7777ff;
}
css
/* In the next two rules, the class attributes must be escaped */
.item\?one {
background-color: pink;
}
.\00003123item {
background-color: yellow;
}
Kết quả
Bộ chọn lớp không hợp lệ
Các bộ chọn lớp trong các quy tắc sau không phải là định danh CSS hợp lệ và sẽ bị bỏ qua.
css
.item?one {
background-color: green;
}
.123item {
background-color: green;
}
Đặc tả
| Specification |
|---|
| Selectors Level 4 # class-html |