CSSNestedDeclarations
Baseline
2024
Newly available
Since December 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Giao diện CSSNestedDeclarations của CSS Rule API được sử dụng để nhóm các CSSRule lồng nhau.
Giao diện này cho phép CSS Object Model (CSSOM phản ánh cấu trúc của các tài liệu CSS có các quy tắc CSS lồng nhau, và đảm bảo rằng các quy tắc được phân tích và đánh giá theo thứ tự chúng được khai báo.
Note: Các triển khai không hỗ trợ giao diện này có thể phân tích các quy tắc lồng nhau theo thứ tự sai. Xem Tương thích trình duyệt để biết thêm thông tin.
Thuộc tính phiên bản
Kế thừa thuộc tính từ lớp tổ tiên CSSRule.
CSSNestedDeclarations.styleRead only-
Trả về giá trị của các quy tắc lồng nhau.
Phương thức phiên bản
Không có phương thức cụ thể; kế thừa phương thức từ lớp tổ tiên CSSRule.
Ví dụ
CSS
CSS bên dưới bao gồm một bộ chọn .foo chứa hai khai báo và một media query.
.foo {
background-color: silver;
@media screen {
color: tomato;
}
color: black;
}
Điều này được đại diện bởi một số đối tượng JavaScript trong CSS Object Model:
- Đối tượng
CSSStyleRuleđại diện cho quy tắcbackground-color: silver. Có thể được trả về quadocument.styleSheets[0].cssRules[0]. - Đối tượng
CSSMediaRuleđại diện cho quy tắc@media screen, và có thể được trả về quadocument.styleSheets[0].cssRules[0].cssRules[0].- Đối tượng
CSSMediaRulechứa đối tượngCSSNestedDeclarationđại diện cho quy tắccolor: tomatođược lồng bởi quy tắc@media screen. Có thể được trả về quadocument.styleSheets[0].cssRules[0].cssRules[0].cssRules[0].
- Đối tượng
- Quy tắc cuối cùng là đối tượng
CSSNestedDeclarationđại diện cho quy tắccolor: blacktrong stylesheet, và có thể được trả về quadocument.styleSheets[0].cssRules[0].cssRules[1].
Note:
Tất cả các kiểu cấp cao nhất sau CSSNestedDeclaration đầu tiên cũng phải được biểu diễn dưới dạng đối tượng CSSNestedDeclaration để tuân theo quy tắc khai báo lồng nhau CSS
CSSOM (CSS Object Model)
↳ CSSStyleRule
.style
- background-color: silver
↳ CSSMediaRule
↳ CSSNestedDeclarations
.style (CSSStyleDeclaration, 1) =
- color: tomato
↳ CSSNestedDeclarations
.style (CSSStyleDeclaration, 1) =
- color: black
Thông số kỹ thuật
| Specification |
|---|
| CSS Nesting Module Level 1 # cssnesteddeclarations |