Lớp bên trong lớp CSS

Bộ chọn lớp CSS so khớp các phần tử dựa trên nội dung thuộc tính của chúng

/* All elements with class="spacious" */
.spacious {
  margin: 2em;
}

/* All 
 elements with class="spacious" */
li.spacious {
  margin: 2em;
}

/* All 
 elements with a class list that includes both "spacious" and "elegant" */
/* For example, class="elegant retro spacious" */
li.spacious.elegant {
  margin: 2em;
}

.class_name { style properties }

[class~=class_name] { style properties }

.red {
  color: #f33;
}

.yellow-bg {
  background: #ffa;
}

.fancy {
  font-weight: bold;
  text-shadow: 4px 4px 3px #77f;
}

<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>

Bảng BCD chỉ tải trong trình duyệt có bật JavaScript. Bật JavaScript để xem dữ liệu

Tìm thấy một vấn đề nội dung với trang này?

• Chỉnh sửa trang trên GitHub
• Báo cáo vấn đề nội dung
• Xem nguồn trên GitHub

Trang này được sửa đổi lần cuối vào ngày 29 tháng 9 năm 2022 bởi những người đóng góp MDN

Phần này mô tả trạng thái của tài liệu này tại thời điểm xuất bản. Các tài liệu khác có thể thay thế tài liệu này. Bạn có thể tìm thấy danh sách các ấn phẩm hiện tại của W3C và bản sửa đổi mới nhất của báo cáo kỹ thuật này trong chỉ mục báo cáo kỹ thuật của W3C tại https. //www. w3. tổ chức/TR/

Tài liệu này đã được xuất bản bởi CSS Working Group dưới dạng Bản thảo Công khai Đầu tiên. Việc xuất bản dưới dạng Dự thảo công khai đầu tiên không bao hàm sự chứng thực của Tư cách thành viên W3C

Đây là một tài liệu dự thảo và có thể được cập nhật, thay thế hoặc lỗi thời bởi các tài liệu khác bất cứ lúc nào. Không phù hợp để trích dẫn tài liệu này ngoài công việc đang tiến hành

Vui lòng gửi phản hồi bằng cách gửi các vấn đề trong GitHub (ưu tiên), bao gồm mã thông số “css-nesting” trong tiêu đề, như thế này. “[css-nesting] …tóm tắt nhận xét…”. Tất cả các vấn đề và nhận xét được lưu trữ. Ngoài ra, phản hồi có thể được gửi đến danh sách gửi thư công cộng (được lưu trữ) www-style@w3. tổ chức

Tài liệu này được điều chỉnh bởi Tài liệu quy trình W3C ngày 15 tháng 9 năm 2020

Tài liệu này được sản xuất bởi một nhóm hoạt động theo Chính sách Bằng sáng chế của W3C. W3C duy trì một danh sách công khai về bất kỳ tiết lộ bằng sáng chế nào được thực hiện liên quan đến các sản phẩm của nhóm; . Một cá nhân thực sự biết về bằng sáng chế mà cá nhân đó tin rằng có chứa phải tiết lộ thông tin theo quy định của

1. Giới thiệu

Phần này không phải là tiêu chuẩn

Mô-đun này mô tả hỗ trợ cho việc lồng quy tắc kiểu trong quy tắc kiểu khác, cho phép bộ chọn của quy tắc bên trong tham chiếu các phần tử khớp với quy tắc bên ngoài. Tính năng này cho phép các kiểu liên quan được tổng hợp thành một cấu trúc duy nhất trong tài liệu CSS, cải thiện khả năng đọc và khả năng bảo trì

1. 1. Tương tác mô-đun

Mô-đun này giới thiệu các quy tắc trình phân tích cú pháp mới giúp mở rộng mô hình trình phân tích cú pháp. Mô-đun này giới thiệu các bộ chọn mở rộng mô-đun

1. 2. giá trị

Thông số kỹ thuật này không xác định bất kỳ thuộc tính hoặc giá trị mới nào

1. 3. Động lực

CSS cho các trang web thậm chí phức tạp vừa phải thường bao gồm nhiều bản sao cho mục đích tạo kiểu cho nội dung liên quan. Ví dụ: đây là một phần của đánh dấu CSS cho một phiên bản của mô-đun

table.colortable td {
  text-align:center;
}
table.colortable td.c {
  text-transform:uppercase;
}
table.colortable td:first-child, table.colortable td:first-child+td {
  border:1px solid black;
}
table.colortable th {
  text-align:center;
  background:black;
  color:white;
}

Lồng ghép cho phép nhóm các quy tắc kiểu liên quan, như thế này

table.colortable {
  & td {
    text-align:center;
    &.c { text-transform:uppercase }
    &:first-child, &:first-child + td { border:1px solid black }
  }
  & th {
    text-align:center;
    background:black;
    color:white;
  }
}

Bên cạnh việc loại bỏ sự trùng lặp, việc nhóm các quy tắc liên quan sẽ cải thiện khả năng đọc và khả năng bảo trì của CSS kết quả

2. Quy tắc kiểu lồng

Quy tắc kiểu có thể được lồng bên trong các quy tắc kiểu khác. Các quy tắc kiểu lồng nhau này hoạt động chính xác như các quy tắc kiểu thông thường—liên kết các thuộc tính với các phần tử thông qua bộ chọn—nhưng chúng "kế thừa" ngữ cảnh bộ chọn của quy tắc gốc, cho phép chúng xây dựng thêm trên bộ chọn của quy tắc gốc mà không cần phải lặp lại, có thể nhiều lần

Có hai cú pháp liên quan chặt chẽ để tạo

Ngoài sự khác biệt nhỏ về cách chúng được viết, cả hai phương pháp đều hoàn toàn tương đương về chức năng

Thật không may, việc lồng các quy tắc kiểu lồng vào bên trong các quy tắc kiểu khác là không rõ ràng—cú pháp của bộ chọn trùng lặp với cú pháp của một khai báo, do đó, việc triển khai yêu cầu nhìn trước không giới hạn để biết liệu một đoạn văn bản nhất định là một khai báo hay bắt đầu một

Ví dụ: nếu trình phân tích cú pháp bắt đầu bằng cách xem màu. bay lượn. , nó không thể biết liệu đó có phải là thuộc tính hay không (được đặt thành giá trị không hợp lệ. ) hoặc bộ chọn cho phần tử

/* & can be used on its own */
.foo {
  color: blue;
  & > .bar { color: red; }
}
/* equivalent to
  .foo { color: blue; }
  .foo > .bar { color: red; }
*/


/* or in a compound selector,
   refining the parent’s selector */
.foo {
  color: blue;
  &.bar { color: red; }
}
/* equivalent to
  .foo { color: blue; }
  .foo.bar { color: red; }
*/

/* multiple selectors in the list must all
   start with & */
.foo, .bar {
  color: blue;
  & + .baz, &.qux { color: red; }
}
/* equivalent to
  .foo, .bar { color: blue; }
  :is(.foo, .bar) + .baz,
  :is(.foo, .bar).qux { color: red; }
*/

/* & can be used multiple times in a single selector */
.foo {
  color: blue;
  & .bar & .baz & .qux { color: red; }
}
/* equivalent to
  .foo { color: blue; }
  .foo .bar .foo .baz .foo .qux { color: red; }
*/

/* Somewhat silly, but can be used all on its own, as well. */
.foo {
  color: blue;
  & { padding: 2ch; }
}
/* equivalent to
  .foo { color: blue; }
  .foo { padding: 2ch; }

  // or

  .foo {
    color: blue;
    padding: 2ch;
  }
*/

/* Again, silly, but can even be doubled up. */
.foo {
  color: blue;
  && { padding: 2ch; }
}
/* equivalent to
  .foo { color: blue; }
  .foo.foo { padding: 2ch; }
*/

/* The parent selector can be arbitrarily complicated */
.error, #404 {
  &:hover > .baz { color: red; }
}
/* equivalent to
  :is(.error, #404):hover > .baz { color: red; }
*/

/* As can the nested selector */
.foo {
  &:is(.bar, &.baz) { color: red; }
}
/* equivalent to
  .foo:is(.bar, .foo.baz) { color: red; }
*/

/* Multiple levels of nesting "stack up" the selectors */
figure {
  margin: 0;

  & > figcaption {
    background: hsl(0 0% 0% / 50%);

    & > p {
      font-size: .9rem;
    }
  }
}
/* equivalent to
  figure { margin: 0; }
  figure > figcaption { background: hsl(0 0% 0% / 50%); }
  figure > figcaption > p { font-size: .9rem; }
*/

Việc yêu cầu các quy tắc kiểu được lồng trực tiếp để sử dụng bộ chọn giải quyết vấn đề này—an không bao giờ có thể là một phần của khai báo, vì vậy trình phân tích cú pháp có thể cho biết ngay rằng nó sẽ phân tích cú pháp một bộ chọn và do đó, quy tắc kiểu lồng nhau

Một số triển khai không phải trình duyệt của các quy tắc lồng nhau không áp đặt yêu cầu này. Trong hầu hết các trường hợp, cuối cùng có thể phân biệt các thuộc tính và bộ chọn, nhưng làm như vậy đòi hỏi phải có cái nhìn không giới hạn trong trình phân tích cú pháp; . CSS cho đến nay chỉ yêu cầu một lượng nhỏ giao diện đã biết trong quá trình phân tích cú pháp của nó, điều này cho phép các thuật toán phân tích cú pháp hiệu quả hơn, do đó, giao diện nhìn không giới hạn thường được coi là không thể chấp nhận được trong số các triển khai CSS của trình duyệt

2. 1. Làm tổ trực tiếp

Một quy tắc kiểu có thể được lồng trực tiếp vào một quy tắc kiểu khác nếu bộ chọn của nó là

Để có tiền tố lồng nhau, a phải là chữ cái đầu tiên trong bộ chọn đầu tiên. Nếu bộ chọn là một danh sách các bộ chọn, thì mọi bộ chọn trong danh sách phải dành cho toàn bộ bộ chọn để có tiền tố tổ

Ví dụ: các tổ hợp sau là hợp lệ.

/* & can be used on its own */
.foo {
  color: blue;
  & > .bar { color: red; }
}
/* equivalent to
  .foo { color: blue; }
  .foo > .bar { color: red; }
*/


/* or in a compound selector,
   refining the parent’s selector */
.foo {
  color: blue;
  &.bar { color: red; }
}
/* equivalent to
  .foo { color: blue; }
  .foo.bar { color: red; }
*/

/* multiple selectors in the list must all
   start with & */
.foo, .bar {
  color: blue;
  & + .baz, &.qux { color: red; }
}
/* equivalent to
  .foo, .bar { color: blue; }
  :is(.foo, .bar) + .baz,
  :is(.foo, .bar).qux { color: red; }
*/

/* & can be used multiple times in a single selector */
.foo {
  color: blue;
  & .bar & .baz & .qux { color: red; }
}
/* equivalent to
  .foo { color: blue; }
  .foo .bar .foo .baz .foo .qux { color: red; }
*/

/* Somewhat silly, but can be used all on its own, as well. */
.foo {
  color: blue;
  & { padding: 2ch; }
}
/* equivalent to
  .foo { color: blue; }
  .foo { padding: 2ch; }

  // or

  .foo {
    color: blue;
    padding: 2ch;
  }
*/

/* Again, silly, but can even be doubled up. */
.foo {
  color: blue;
  && { padding: 2ch; }
}
/* equivalent to
  .foo { color: blue; }
  .foo.foo { padding: 2ch; }
*/

/* The parent selector can be arbitrarily complicated */
.error, #404 {
  &:hover > .baz { color: red; }
}
/* equivalent to
  :is(.error, #404):hover > .baz { color: red; }
*/

/* As can the nested selector */
.foo {
  &:is(.bar, &.baz) { color: red; }
}
/* equivalent to
  .foo:is(.bar, .foo.baz) { color: red; }
*/

/* Multiple levels of nesting "stack up" the selectors */
figure {
  margin: 0;

  & > figcaption {
    background: hsl(0 0% 0% / 50%);

    & > p {
      font-size: .9rem;
    }
  }
}
/* equivalent to
  figure { margin: 0; }
  figure > figcaption { background: hsl(0 0% 0% / 50%); }
  figure > figcaption > p { font-size: .9rem; }
*/

Nhưng đây không phải là

/* No & at all */
.foo {
  color: blue;
  .bar {
    color: red;
  }
}

/* & isn’t the first simple selector */
.foo {
  color: blue;
  .bar& {
    color: red;
  }
}

/* & isn’t the first selector of every one in the list */
.foo, .bar {
  color: blue;
  & + .baz, .qux { color: red; }
}

Ví dụ cuối cùng ở đây không phải là mơ hồ về mặt kỹ thuật, vì toàn bộ bộ chọn bắt đầu bằng , nhưng đó là một mối nguy khi chỉnh sửa—nếu quy tắc được cấu trúc lại để xóa bộ chọn đầu tiên hoặc sắp xếp lại các bộ chọn trong danh sách, vốn thường sẽ luôn giữ nguyên

Một số công cụ tạo CSS sẽ nối các bộ chọn như chuỗi, cho phép tác giả xây dựng một bộ chọn đơn giản duy nhất trên các cấp độ lồng nhau. Điều này đôi khi được sử dụng bởi các phương pháp tổ chức bộ chọn như để giảm sự lặp lại trên một tệp, khi bản thân các bộ chọn có sự lặp lại đáng kể trong nội bộ

Ví dụ, nếu một thành phần sử dụng lớp. foo và một thành phần lồng nhau sử dụng. foo__bar, bạn có thể viết cái này bằng Sass dưới dạng

.foo {
  color: blue;
  &__bar { color: red; }
}
/* In Sass, this is equivalent to
   .foo { color: blue; }
   .foo__bar { color: red; }
*/

Thật không may, phương pháp này không phù hợp với cú pháp của bộ chọn nói chung và tốt nhất là yêu cầu kinh nghiệm được điều chỉnh theo các phương pháp viết bộ chọn đặc biệt để nhận ra khi nào tác giả muốn nó, so với việc tác giả cố gắng thêm một bộ chọn loại trong quy tắc lồng nhau. Ví dụ: __bar là tên thành phần tùy chỉnh hợp lệ trong HTML

Như vậy, CSS không thể làm điều này;

.foo {
  color: blue;
  &__bar { color: red; }
}
/* In CSS, this is instead equivalent to
   .foo { color: blue; }
   __bar.foo { color: red; }
*/

2. 2. Quy tắc làm tổ.

Nhìn đẹp nhưng hơi mỏng manh. Một số bộ chọn lồng hợp lệ, như. foo &, không được phép và việc chỉnh sửa bộ chọn theo một số cách nhất định có thể khiến quy tắc không hợp lệ một cách bất ngờ. Đồng thời, một số tác giả nhận thấy việc lồng nhau khó phân biệt trực quan với các khai báo xung quanh

Để hỗ trợ tất cả các vấn đề này, thông số kỹ thuật này xác định quy tắc, áp đặt ít hạn chế hơn về cách hợp lệ các quy tắc kiểu lồng nhau. Cú pháp của nó là

@nest = @nest  {  }

Quy tắc chỉ có hiệu lực bên trong một. Nếu được sử dụng trong bất kỳ ngữ cảnh nào khác (đặc biệt, ở cấp cao nhất của biểu định kiểu) thì quy tắc không hợp lệ

Quy tắc hoạt động giống hệt như một. nó bắt đầu bằng một bộ chọn và chứa một khối khai báo áp dụng cho các phần tử mà bộ chọn phù hợp. Khối đó được xử lý giống hệt với một khối, vì vậy mọi thứ hợp lệ trong quy tắc kiểu (chẳng hạn như quy tắc @nest bổ sung) cũng hợp lệ ở đây

Sự khác biệt duy nhất giữa và a là bộ chọn được sử dụng trong quy tắc @nest ít bị ràng buộc hơn. nó chỉ phải chứa tổ, có nghĩa là nó chứa a ở đâu đó, thay vì yêu cầu nó ở đầu mỗi bộ chọn. Một danh sách các bộ chọn là nếu tất cả các bộ chọn riêng lẻ của nó đều chứa tổ

Bất cứ điều gì bạn có thể làm với , bạn có thể làm với một quy tắc, vì vậy điều sau đây là hợp lệ.

.foo {
  color: red;
  @nest & > .bar {
    color: blue;
  }
}
/* equivalent to
  .foo { color: red; }
  .foo > .bar { color: blue; }
*/

Nhưng cho phép các bộ chọn không bắt đầu bằng , vì vậy những điều sau đây cũng hợp lệ

.foo {
  color: red;
  @nest .parent & {
    color: blue;
  }
}
/* equivalent to
  .foo { color: red; }
  .parent .foo { color: blue; }
*/

.foo {
  color: red;
  @nest :not(&) {
    color: blue;
  }
}
/* equivalent to
  .foo { color: red; }
  :not(.foo) { color: blue; }
*/

Nhưng sau đây là không hợp lệ

.foo {
  color: red;
  @nest .bar {
    color: blue;
  }
}
/* Invalid because there’s no nesting selector */

.foo {
  color: red;
  @nest & .bar, .baz {
    color: blue;
  }
}
/* Invalid because not all selectors in the list
  contain a nesting selector */

và các quy tắc có thể được trộn tùy ý. Ví dụ.

table.colortable {
  & td {
    text-align:center;
    &.c { text-transform:uppercase }
    &:first-child, &:first-child + td { border:1px solid black }
  }
  & th {
    text-align:center;
    background:black;
    color:white;
  }
}

2. 3. Quy tắc có điều kiện lồng nhau

Ngoài các quy tắc và quy tắc kiểu, thông số kỹ thuật này cho phép các quy tắc nhóm có điều kiện lồng nhau bên trong

Khi được lồng vào nhau theo cách này, nội dung của a được phân tích thành chứ không phải

Ghi chú. Điều này ngụ ý rằng các quy tắc kiểu "bình thường", không có , không hợp lệ trong một

Ví dụ: các tổ có điều kiện sau đây là hợp lệ.

table.colortable {
  & td {
    text-align:center;
    &.c { text-transform:uppercase }
    &:first-child, &:first-child + td { border:1px solid black }
  }
  & th {
    text-align:center;
    background:black;
    color:white;
  }
}

Nhưng sau đây là không hợp lệ

table.colortable {
  & td {
    text-align:center;
    &.c { text-transform:uppercase }
    &:first-child, &:first-child + td { border:1px solid black }
  }
  & th {
    text-align:center;
    background:black;
    color:white;
  }
}

2. 4. Trộn các quy tắc lồng và khai báo

Khi quy tắc kiểu chứa cả khai báo và hoặc , khai báo phải xuất hiện trước, theo sau là quy tắc lồng nhau. Các tuyên bố xảy ra sau một quy tắc lồng nhau không hợp lệ và bị bỏ qua

Ví dụ, trong đoạn mã sau.

table.colortable {
  & td {
    text-align:center;
    &.c { text-transform:uppercase }
    &:first-child, &:first-child + td { border:1px solid black }
  }
  & th {
    text-align:center;
    background:black;
    color:white;
  }
}

Tuyên bố không hợp lệ và bị bỏ qua, vì nó xảy ra sau

Tuy nhiên, các quy tắc lồng nhau khác vẫn hợp lệ, như trong ví dụ này

table.colortable {
  & td {
    text-align:center;
    &.c { text-transform:uppercase }
    &:first-child, &:first-child + td { border:1px solid black }
  }
  & th {
    text-align:center;
    background:black;
    color:white;
  }
}

Với mục đích xác định và được coi là xuất hiện sau quy tắc gốc của chúng

Ví dụ.

table.colortable {
  & td {
    text-align:center;
    &.c { text-transform:uppercase }
    &:first-child, &:first-child + td { border:1px solid black }
  }
  & th {
    text-align:center;
    background:black;
    color:white;
  }
}

Cả hai khai báo đều có cùng độ đặc hiệu (0,0,1), nhưng quy tắc lồng nhau được coi là xuất hiện sau quy tắc cha của nó, vì vậy các khai báo sẽ thắng theo tầng

Mặt khác, trong ví dụ này

table.colortable {
  & td {
    text-align:center;
    &.c { text-transform:uppercase }
    &:first-child, &:first-child + td { border:1px solid black }
  }
  & th {
    text-align:center;
    background:black;
    color:white;
  }
}

Lớp giả làm giảm độ đặc hiệu của 0, vì vậy khai báo bây giờ có độ đặc hiệu là (0,0,0) và mất màu. tuyên bố màu xanh lam trước khi xem xét "Thứ tự xuất hiện"

3. Bộ chọn lồng nhau. bộ chọn

Khi sử dụng a , người ta phải có khả năng tham chiếu đến các phần tử khớp với quy tắc gốc; . Để thực hiện điều đó, thông số kỹ thuật này xác định một bộ chọn mới, bộ chọn lồng nhau, được viết là & (U+0026 AMPERSAND)

Khi được sử dụng trong bộ chọn của a , đại diện cho các phần tử khớp với quy tắc gốc. Khi được sử dụng trong bất kỳ ngữ cảnh nào khác, nó không đại diện cho điều gì. (Tức là, nó hợp lệ, nhưng không khớp với phần tử nào. )

Có thể khử đường bằng cách thay thế nó bằng bộ chọn của quy tắc kiểu gốc, được bao bọc trong bộ chọn. Ví dụ, ______6_______7

tương đương với

table.colortable {
  & td {
    text-align:center;
    &.c { text-transform:uppercase }
    &:first-child, &:first-child + td { border:1px solid black }
  }
  & th {
    text-align:center;
    background:black;
    color:white;
  }
}

Của bằng với độ đặc hiệu lớn nhất trong số các bộ chọn phức tạp trong danh sách bộ chọn của quy tắc kiểu gốc (giống hệt với hành vi của )

Ví dụ: đưa ra các quy tắc kiểu sau.

table.colortable {
  & td {
    text-align:center;
    &.c { text-transform:uppercase }
    &:first-child, &:first-child + td { border:1px solid black }
  }
  & th {
    text-align:center;
    background:black;
    color:white;
  }
}

Sau đó, trong một cấu trúc DOM như

/* & can be used on its own */
.foo {
  color: blue;
  & > .bar { color: red; }
}
/* equivalent to
  .foo { color: blue; }
  .foo > .bar { color: red; }
*/


/* or in a compound selector,
   refining the parent’s selector */
.foo {
  color: blue;
  &.bar { color: red; }
}
/* equivalent to
  .foo { color: blue; }
  .foo.bar { color: red; }
*/

/* multiple selectors in the list must all
   start with & */
.foo, .bar {
  color: blue;
  & + .baz, &.qux { color: red; }
}
/* equivalent to
  .foo, .bar { color: blue; }
  :is(.foo, .bar) + .baz,
  :is(.foo, .bar).qux { color: red; }
*/

/* & can be used multiple times in a single selector */
.foo {
  color: blue;
  & .bar & .baz & .qux { color: red; }
}
/* equivalent to
  .foo { color: blue; }
  .foo .bar .foo .baz .foo .qux { color: red; }
*/

/* Somewhat silly, but can be used all on its own, as well. */
.foo {
  color: blue;
  & { padding: 2ch; }
}
/* equivalent to
  .foo { color: blue; }
  .foo { padding: 2ch; }

  // or

  .foo {
    color: blue;
    padding: 2ch;
  }
*/

/* Again, silly, but can even be doubled up. */
.foo {
  color: blue;
  && { padding: 2ch; }
}
/* equivalent to
  .foo { color: blue; }
  .foo.foo { padding: 2ch; }
*/

/* The parent selector can be arbitrarily complicated */
.error, #404 {
  &:hover > .baz { color: red; }
}
/* equivalent to
  :is(.error, #404):hover > .baz { color: red; }
*/

/* As can the nested selector */
.foo {
  &:is(.bar, &.baz) { color: red; }
}
/* equivalent to
  .foo:is(.bar, .foo.baz) { color: red; }
*/

/* Multiple levels of nesting "stack up" the selectors */
figure {
  margin: 0;

  & > figcaption {
    background: hsl(0 0% 0% / 50%);

    & > p {
      font-size: .9rem;
    }
  }
}
/* equivalent to
  figure { margin: 0; }
  figure > figcaption { background: hsl(0 0% 0% / 50%); }
  figure > figcaption > p { font-size: .9rem; }
*/

Văn bản sẽ có màu xanh lam, thay vì màu đỏ. Độ đặc hiệu của the lớn hơn độ đặc hiệu của #a ([1,0,0]) và b ([0,0,1]), do đó, nó là [1,0,0] và toàn bộ bộ chọn & c . foo c ([0,1,1])

Đáng chú ý, kết quả này khác với kết quả bạn nhận được nếu việc lồng nhau được mở rộng theo cách thủ công thành các quy tắc không lồng nhau, vì khi đó khai báo sẽ khớp do bộ chọn b c ([0,0,2]) thay vì #a c

Việc cố ý sử dụng các quy tắc cụ thể giống như lớp giả, chỉ sử dụng tính cụ thể lớn nhất trong số các đối số của nó, thay vì theo dõi bộ chọn nào thực sự phù hợp

Điều này là bắt buộc vì lý do hiệu suất;

Đó là câu hỏi, tho. tại sao chúng ta xác định theo nghĩa ? . is(), phần lớn là do chúng có trước sự ra đời của. cũng là(). Thay vào đó, họ khử đường trực tiếp;

/* & can be used on its own */
.foo {
  color: blue;
  & > .bar { color: red; }
}
/* equivalent to
  .foo { color: blue; }
  .foo > .bar { color: red; }
*/


/* or in a compound selector,
   refining the parent’s selector */
.foo {
  color: blue;
  &.bar { color: red; }
}
/* equivalent to
  .foo { color: blue; }
  .foo.bar { color: red; }
*/

/* multiple selectors in the list must all
   start with & */
.foo, .bar {
  color: blue;
  & + .baz, &.qux { color: red; }
}
/* equivalent to
  .foo, .bar { color: blue; }
  :is(.foo, .bar) + .baz,
  :is(.foo, .bar).qux { color: red; }
*/

/* & can be used multiple times in a single selector */
.foo {
  color: blue;
  & .bar & .baz & .qux { color: red; }
}
/* equivalent to
  .foo { color: blue; }
  .foo .bar .foo .baz .foo .qux { color: red; }
*/

/* Somewhat silly, but can be used all on its own, as well. */
.foo {
  color: blue;
  & { padding: 2ch; }
}
/* equivalent to
  .foo { color: blue; }
  .foo { padding: 2ch; }

  // or

  .foo {
    color: blue;
    padding: 2ch;
  }
*/

/* Again, silly, but can even be doubled up. */
.foo {
  color: blue;
  && { padding: 2ch; }
}
/* equivalent to
  .foo { color: blue; }
  .foo.foo { padding: 2ch; }
*/

/* The parent selector can be arbitrarily complicated */
.error, #404 {
  &:hover > .baz { color: red; }
}
/* equivalent to
  :is(.error, #404):hover > .baz { color: red; }
*/

/* As can the nested selector */
.foo {
  &:is(.bar, &.baz) { color: red; }
}
/* equivalent to
  .foo:is(.bar, .foo.baz) { color: red; }
*/

/* Multiple levels of nesting "stack up" the selectors */
figure {
  margin: 0;

  & > figcaption {
    background: hsl(0 0% 0% / 50%);

    & > p {
      font-size: .9rem;
    }
  }
}
/* equivalent to
  figure { margin: 0; }
  figure > figcaption { background: hsl(0 0% 0% / 50%); }
  figure > figcaption > p { font-size: .9rem; }
*/

Ở đây, ba cấp độ lồng nhau, mỗi cấp độ có ba bộ chọn trong danh sách của chúng, đã tạo ra 27 bộ chọn khử đường. Việc thêm nhiều bộ chọn hơn vào danh sách, thêm nhiều cấp độ lồng nhau hơn hoặc làm cho các quy tắc lồng nhau phức tạp hơn có thể khiến một quy tắc tương đối nhỏ mở rộng thành nhiều megabyte bộ chọn (hoặc nhiều hơn thế nữa. )

Một số công cụ CSS tránh điều tồi tệ nhất bằng cách loại bỏ một số biến thể theo kinh nghiệm, vì vậy chúng không phải xuất ra nhiều nhưng vẫn có thể đúng, nhưng đó không phải là một tùy chọn có sẵn cho các UA

Thay vào đó, khử đường bằng cách loại bỏ hoàn toàn vấn đề này, với chi phí làm cho tính đặc hiệu kém hữu ích hơn một chút, được đánh giá là một sự đánh đổi hợp lý

The được phép ở bất cứ đâu trong a , ngay cả trước a , vi phạm các hạn chế thông thường đối với việc đặt hàng trong bộ chọn ghép

Ví dụ: &div là một bộ chọn lồng hợp lệ, có nghĩa là "bất kỳ quy tắc gốc nào phù hợp với quy tắc gốc, nhưng chỉ khi đó cũng là một phần tử

/* & can be used on its own */
.foo {
  color: blue;
  & > .bar { color: red; }
}
/* equivalent to
  .foo { color: blue; }
  .foo > .bar { color: red; }
*/


/* or in a compound selector,
   refining the parent’s selector */
.foo {
  color: blue;
  &.bar { color: red; }
}
/* equivalent to
  .foo { color: blue; }
  .foo.bar { color: red; }
*/

/* multiple selectors in the list must all
   start with & */
.foo, .bar {
  color: blue;
  & + .baz, &.qux { color: red; }
}
/* equivalent to
  .foo, .bar { color: blue; }
  :is(.foo, .bar) + .baz,
  :is(.foo, .bar).qux { color: red; }
*/

/* & can be used multiple times in a single selector */
.foo {
  color: blue;
  & .bar & .baz & .qux { color: red; }
}
/* equivalent to
  .foo { color: blue; }
  .foo .bar .foo .baz .foo .qux { color: red; }
*/

/* Somewhat silly, but can be used all on its own, as well. */
.foo {
  color: blue;
  & { padding: 2ch; }
}
/* equivalent to
  .foo { color: blue; }
  .foo { padding: 2ch; }

  // or

  .foo {
    color: blue;
    padding: 2ch;
  }
*/

/* Again, silly, but can even be doubled up. */
.foo {
  color: blue;
  && { padding: 2ch; }
}
/* equivalent to
  .foo { color: blue; }
  .foo.foo { padding: 2ch; }
*/

/* The parent selector can be arbitrarily complicated */
.error, #404 {
  &:hover > .baz { color: red; }
}
/* equivalent to
  :is(.error, #404):hover > .baz { color: red; }
*/

/* As can the nested selector */
.foo {
  &:is(.bar, &.baz) { color: red; }
}
/* equivalent to
  .foo:is(.bar, .foo.baz) { color: red; }
*/

/* Multiple levels of nesting "stack up" the selectors */
figure {
  margin: 0;

  & > figcaption {
    background: hsl(0 0% 0% / 50%);

    & > p {
      font-size: .9rem;
    }
  }
}
/* equivalent to
  figure { margin: 0; }
  figure > figcaption { background: hsl(0 0% 0% / 50%); }
  figure > figcaption > p { font-size: .9rem; }
*/

Nó cũng có thể được viết là div& với ý nghĩa tương tự, nhưng điều đó sẽ không hợp lệ để bắt đầu một

4. CSSOM

Các quy tắc kiểu CSS có khả năng có các quy tắc lồng nhau

/* & can be used on its own */
.foo {
  color: blue;
  & > .bar { color: red; }
}
/* equivalent to
  .foo { color: blue; }
  .foo > .bar { color: red; }
*/


/* or in a compound selector,
   refining the parent’s selector */
.foo {
  color: blue;
  &.bar { color: red; }
}
/* equivalent to
  .foo { color: blue; }
  .foo.bar { color: red; }
*/

/* multiple selectors in the list must all
   start with & */
.foo, .bar {
  color: blue;
  & + .baz, &.qux { color: red; }
}
/* equivalent to
  .foo, .bar { color: blue; }
  :is(.foo, .bar) + .baz,
  :is(.foo, .bar).qux { color: red; }
*/

/* & can be used multiple times in a single selector */
.foo {
  color: blue;
  & .bar & .baz & .qux { color: red; }
}
/* equivalent to
  .foo { color: blue; }
  .foo .bar .foo .baz .foo .qux { color: red; }
*/

/* Somewhat silly, but can be used all on its own, as well. */
.foo {
  color: blue;
  & { padding: 2ch; }
}
/* equivalent to
  .foo { color: blue; }
  .foo { padding: 2ch; }

  // or

  .foo {
    color: blue;
    padding: 2ch;
  }
*/

/* Again, silly, but can even be doubled up. */
.foo {
  color: blue;
  && { padding: 2ch; }
}
/* equivalent to
  .foo { color: blue; }
  .foo.foo { padding: 2ch; }
*/

/* The parent selector can be arbitrarily complicated */
.error, #404 {
  &:hover > .baz { color: red; }
}
/* equivalent to
  :is(.error, #404):hover > .baz { color: red; }
*/

/* As can the nested selector */
.foo {
  &:is(.bar, &.baz) { color: red; }
}
/* equivalent to
  .foo:is(.bar, .foo.baz) { color: red; }
*/

/* Multiple levels of nesting "stack up" the selectors */
figure {
  margin: 0;

  & > figcaption {
    background: hsl(0 0% 0% / 50%);

    & > p {
      font-size: .9rem;
    }
  }
}
/* equivalent to
  figure { margin: 0; }
  figure > figcaption { background: hsl(0 0% 0% / 50%); }
  figure > figcaption > p { font-size: .9rem; }
*/

Thuộc tính

/* & can be used on its own */
.foo {
  color: blue;
  & > .bar { color: red; }
}
/* equivalent to
  .foo { color: blue; }
  .foo > .bar { color: red; }
*/


/* or in a compound selector,
   refining the parent’s selector */
.foo {
  color: blue;
  &.bar { color: red; }
}
/* equivalent to
  .foo { color: blue; }
  .foo.bar { color: red; }
*/

/* multiple selectors in the list must all
   start with & */
.foo, .bar {
  color: blue;
  & + .baz, &.qux { color: red; }
}
/* equivalent to
  .foo, .bar { color: blue; }
  :is(.foo, .bar) + .baz,
  :is(.foo, .bar).qux { color: red; }
*/

/* & can be used multiple times in a single selector */
.foo {
  color: blue;
  & .bar & .baz & .qux { color: red; }
}
/* equivalent to
  .foo { color: blue; }
  .foo .bar .foo .baz .foo .qux { color: red; }
*/

/* Somewhat silly, but can be used all on its own, as well. */
.foo {
  color: blue;
  & { padding: 2ch; }
}
/* equivalent to
  .foo { color: blue; }
  .foo { padding: 2ch; }

  // or

  .foo {
    color: blue;
    padding: 2ch;
  }
*/

/* Again, silly, but can even be doubled up. */
.foo {
  color: blue;
  && { padding: 2ch; }
}
/* equivalent to
  .foo { color: blue; }
  .foo.foo { padding: 2ch; }
*/

/* The parent selector can be arbitrarily complicated */
.error, #404 {
  &:hover > .baz { color: red; }
}
/* equivalent to
  :is(.error, #404):hover > .baz { color: red; }
*/

/* As can the nested selector */
.foo {
  &:is(.bar, &.baz) { color: red; }
}
/* equivalent to
  .foo:is(.bar, .foo.baz) { color: red; }
*/

/* Multiple levels of nesting "stack up" the selectors */
figure {
  margin: 0;

  & > figcaption {
    background: hsl(0 0% 0% / 50%);

    & > p {
      font-size: .9rem;
    }
  }
}
/* equivalent to
  figure { margin: 0; }
  figure > figcaption { background: hsl(0 0% 0% / 50%); }
  figure > figcaption > p { font-size: .9rem; }
*/

/* & can be used on its own */
.foo {
  color: blue;
  & > .bar { color: red; }
}
/* equivalent to
  .foo { color: blue; }
  .foo > .bar { color: red; }
*/


/* or in a compound selector,
   refining the parent’s selector */
.foo {
  color: blue;
  &.bar { color: red; }
}
/* equivalent to
  .foo { color: blue; }
  .foo.bar { color: red; }
*/

/* multiple selectors in the list must all
   start with & */
.foo, .bar {
  color: blue;
  & + .baz, &.qux { color: red; }
}
/* equivalent to
  .foo, .bar { color: blue; }
  :is(.foo, .bar) + .baz,
  :is(.foo, .bar).qux { color: red; }
*/

/* & can be used multiple times in a single selector */
.foo {
  color: blue;
  & .bar & .baz & .qux { color: red; }
}
/* equivalent to
  .foo { color: blue; }
  .foo .bar .foo .baz .foo .qux { color: red; }
*/

/* Somewhat silly, but can be used all on its own, as well. */
.foo {
  color: blue;
  & { padding: 2ch; }
}
/* equivalent to
  .foo { color: blue; }
  .foo { padding: 2ch; }

  // or

  .foo {
    color: blue;
    padding: 2ch;
  }
*/

/* Again, silly, but can even be doubled up. */
.foo {
  color: blue;
  && { padding: 2ch; }
}
/* equivalent to
  .foo { color: blue; }
  .foo.foo { padding: 2ch; }
*/

/* The parent selector can be arbitrarily complicated */
.error, #404 {
  &:hover > .baz { color: red; }
}
/* equivalent to
  :is(.error, #404):hover > .baz { color: red; }
*/

/* As can the nested selector */
.foo {
  &:is(.bar, &.baz) { color: red; }
}
/* equivalent to
  .foo:is(.bar, .foo.baz) { color: red; }
*/

/* Multiple levels of nesting "stack up" the selectors */
figure {
  margin: 0;

  & > figcaption {
    background: hsl(0 0% 0% / 50%);

    & > p {
      font-size: .9rem;
    }
  }
}
/* equivalent to
  figure { margin: 0; }
  figure > figcaption { background: hsl(0 0% 0% / 50%); }
  figure > figcaption > p { font-size: .9rem; }
*/

Phương thức

/* & can be used on its own */
.foo {
  color: blue;
  & > .bar { color: red; }
}
/* equivalent to
  .foo { color: blue; }
  .foo > .bar { color: red; }
*/


/* or in a compound selector,
   refining the parent’s selector */
.foo {
  color: blue;
  &.bar { color: red; }
}
/* equivalent to
  .foo { color: blue; }
  .foo.bar { color: red; }
*/

/* multiple selectors in the list must all
   start with & */
.foo, .bar {
  color: blue;
  & + .baz, &.qux { color: red; }
}
/* equivalent to
  .foo, .bar { color: blue; }
  :is(.foo, .bar) + .baz,
  :is(.foo, .bar).qux { color: red; }
*/

/* & can be used multiple times in a single selector */
.foo {
  color: blue;
  & .bar & .baz & .qux { color: red; }
}
/* equivalent to
  .foo { color: blue; }
  .foo .bar .foo .baz .foo .qux { color: red; }
*/

/* Somewhat silly, but can be used all on its own, as well. */
.foo {
  color: blue;
  & { padding: 2ch; }
}
/* equivalent to
  .foo { color: blue; }
  .foo { padding: 2ch; }

  // or

  .foo {
    color: blue;
    padding: 2ch;
  }
*/

/* Again, silly, but can even be doubled up. */
.foo {
  color: blue;
  && { padding: 2ch; }
}
/* equivalent to
  .foo { color: blue; }
  .foo.foo { padding: 2ch; }
*/

/* The parent selector can be arbitrarily complicated */
.error, #404 {
  &:hover > .baz { color: red; }
}
/* equivalent to
  :is(.error, #404):hover > .baz { color: red; }
*/

/* As can the nested selector */
.foo {
  &:is(.bar, &.baz) { color: red; }
}
/* equivalent to
  .foo:is(.bar, .foo.baz) { color: red; }
*/

/* Multiple levels of nesting "stack up" the selectors */
figure {
  margin: 0;

  & > figcaption {
    background: hsl(0 0% 0% / 50%);

    & > p {
      font-size: .9rem;
    }
  }
}
/* equivalent to
  figure { margin: 0; }
  figure > figcaption { background: hsl(0 0% 0% / 50%); }
  figure > figcaption > p { font-size: .9rem; }
*/

Phương pháp

/* & can be used on its own */
.foo {
  color: blue;
  & > .bar { color: red; }
}
/* equivalent to
  .foo { color: blue; }
  .foo > .bar { color: red; }
*/


/* or in a compound selector,
   refining the parent’s selector */
.foo {
  color: blue;
  &.bar { color: red; }
}
/* equivalent to
  .foo { color: blue; }
  .foo.bar { color: red; }
*/

/* multiple selectors in the list must all
   start with & */
.foo, .bar {
  color: blue;
  & + .baz, &.qux { color: red; }
}
/* equivalent to
  .foo, .bar { color: blue; }
  :is(.foo, .bar) + .baz,
  :is(.foo, .bar).qux { color: red; }
*/

/* & can be used multiple times in a single selector */
.foo {
  color: blue;
  & .bar & .baz & .qux { color: red; }
}
/* equivalent to
  .foo { color: blue; }
  .foo .bar .foo .baz .foo .qux { color: red; }
*/

/* Somewhat silly, but can be used all on its own, as well. */
.foo {
  color: blue;
  & { padding: 2ch; }
}
/* equivalent to
  .foo { color: blue; }
  .foo { padding: 2ch; }

  // or

  .foo {
    color: blue;
    padding: 2ch;
  }
*/

/* Again, silly, but can even be doubled up. */
.foo {
  color: blue;
  && { padding: 2ch; }
}
/* equivalent to
  .foo { color: blue; }
  .foo.foo { padding: 2ch; }
*/

/* The parent selector can be arbitrarily complicated */
.error, #404 {
  &:hover > .baz { color: red; }
}
/* equivalent to
  :is(.error, #404):hover > .baz { color: red; }
*/

/* As can the nested selector */
.foo {
  &:is(.bar, &.baz) { color: red; }
}
/* equivalent to
  .foo:is(.bar, .foo.baz) { color: red; }
*/

/* Multiple levels of nesting "stack up" the selectors */
figure {
  margin: 0;

  & > figcaption {
    background: hsl(0 0% 0% / 50%);

    & > p {
      font-size: .9rem;
    }
  }
}
/* equivalent to
  figure { margin: 0; }
  figure > figcaption { background: hsl(0 0% 0% / 50%); }
  figure > figcaption > p { font-size: .9rem; }
*/

Các giao diện

/* No & at all */
.foo {
  color: blue;
  .bar {
    color: red;
  }
}

/* & isn’t the first simple selector */
.foo {
  color: blue;
  .bar& {
    color: red;
  }
}

/* & isn’t the first selector of every one in the list */
.foo, .bar {
  color: blue;
  & + .baz, .qux { color: red; }
}

/* & can be used on its own */
.foo {
  color: blue;
  & > .bar { color: red; }
}
/* equivalent to
  .foo { color: blue; }
  .foo > .bar { color: red; }
*/


/* or in a compound selector,
   refining the parent’s selector */
.foo {
  color: blue;
  &.bar { color: red; }
}
/* equivalent to
  .foo { color: blue; }
  .foo.bar { color: red; }
*/

/* multiple selectors in the list must all
   start with & */
.foo, .bar {
  color: blue;
  & + .baz, &.qux { color: red; }
}
/* equivalent to
  .foo, .bar { color: blue; }
  :is(.foo, .bar) + .baz,
  :is(.foo, .bar).qux { color: red; }
*/

/* & can be used multiple times in a single selector */
.foo {
  color: blue;
  & .bar & .baz & .qux { color: red; }
}
/* equivalent to
  .foo { color: blue; }
  .foo .bar .foo .baz .foo .qux { color: red; }
*/

/* Somewhat silly, but can be used all on its own, as well. */
.foo {
  color: blue;
  & { padding: 2ch; }
}
/* equivalent to
  .foo { color: blue; }
  .foo { padding: 2ch; }

  // or

  .foo {
    color: blue;
    padding: 2ch;
  }
*/

/* Again, silly, but can even be doubled up. */
.foo {
  color: blue;
  && { padding: 2ch; }
}
/* equivalent to
  .foo { color: blue; }
  .foo.foo { padding: 2ch; }
*/

/* The parent selector can be arbitrarily complicated */
.error, #404 {
  &:hover > .baz { color: red; }
}
/* equivalent to
  :is(.error, #404):hover > .baz { color: red; }
*/

/* As can the nested selector */
.foo {
  &:is(.bar, &.baz) { color: red; }
}
/* equivalent to
  .foo:is(.bar, .foo.baz) { color: red; }
*/

/* Multiple levels of nesting "stack up" the selectors */
figure {
  margin: 0;

  & > figcaption {
    background: hsl(0 0% 0% / 50%);

    & > p {
      font-size: .9rem;
    }
  }
}
/* equivalent to
  figure { margin: 0; }
  figure > figcaption { background: hsl(0 0% 0% / 50%); }
  figure > figcaption > p { font-size: .9rem; }
*/

Thuộc tính

/* No & at all */
.foo {
  color: blue;
  .bar {
    color: red;
  }
}

/* & isn’t the first simple selector */
.foo {
  color: blue;
  .bar& {
    color: red;
  }
}

/* & isn’t the first selector of every one in the list */
.foo, .bar {
  color: blue;
  & + .baz, .qux { color: red; }
}

/* No & at all */
.foo {
  color: blue;
  .bar {
    color: red;
  }
}

/* & isn’t the first simple selector */
.foo {
  color: blue;
  .bar& {
    color: red;
  }
}

/* & isn’t the first selector of every one in the list */
.foo, .bar {
  color: blue;
  & + .baz, .qux { color: red; }
}

1. Chạy thuật toán trên giá trị đã cho

2. Nếu thuật toán trả về một giá trị khác null, hãy thay thế giá trị được liên kết với giá trị được trả về

3. Ngược lại, nếu thuật toán trả về giá trị null, không làm gì cả

Thuộc tính

/* No & at all */
.foo {
  color: blue;
  .bar {
    color: red;
  }
}

/* & isn’t the first simple selector */
.foo {
  color: blue;
  .bar& {
    color: red;
  }
}

/* & isn’t the first selector of every one in the list */
.foo, .bar {
  color: blue;
  & + .baz, .qux { color: red; }
}

/* No & at all */
.foo {
  color: blue;
  .bar {
    color: red;
  }
}

/* & isn’t the first simple selector */
.foo {
  color: blue;
  .bar& {
    color: red;
  }
}

/* & isn’t the first selector of every one in the list */
.foo, .bar {
  color: blue;
  & + .baz, .qux { color: red; }
}

Bỏ đặt

Các khai báo được khai báo trong quy tắc, trong

đối tượng

Vô giá trị

Thuộc tính

/* & can be used on its own */
.foo {
  color: blue;
  & > .bar { color: red; }
}
/* equivalent to
  .foo { color: blue; }
  .foo > .bar { color: red; }
*/


/* or in a compound selector,
   refining the parent’s selector */
.foo {
  color: blue;
  &.bar { color: red; }
}
/* equivalent to
  .foo { color: blue; }
  .foo.bar { color: red; }
*/

/* multiple selectors in the list must all
   start with & */
.foo, .bar {
  color: blue;
  & + .baz, &.qux { color: red; }
}
/* equivalent to
  .foo, .bar { color: blue; }
  :is(.foo, .bar) + .baz,
  :is(.foo, .bar).qux { color: red; }
*/

/* & can be used multiple times in a single selector */
.foo {
  color: blue;
  & .bar & .baz & .qux { color: red; }
}
/* equivalent to
  .foo { color: blue; }
  .foo .bar .foo .baz .foo .qux { color: red; }
*/

/* Somewhat silly, but can be used all on its own, as well. */
.foo {
  color: blue;
  & { padding: 2ch; }
}
/* equivalent to
  .foo { color: blue; }
  .foo { padding: 2ch; }

  // or

  .foo {
    color: blue;
    padding: 2ch;
  }
*/

/* Again, silly, but can even be doubled up. */
.foo {
  color: blue;
  && { padding: 2ch; }
}
/* equivalent to
  .foo { color: blue; }
  .foo.foo { padding: 2ch; }
*/

/* The parent selector can be arbitrarily complicated */
.error, #404 {
  &:hover > .baz { color: red; }
}
/* equivalent to
  :is(.error, #404):hover > .baz { color: red; }
*/

/* As can the nested selector */
.foo {
  &:is(.bar, &.baz) { color: red; }
}
/* equivalent to
  .foo:is(.bar, .foo.baz) { color: red; }
*/

/* Multiple levels of nesting "stack up" the selectors */
figure {
  margin: 0;

  & > figcaption {
    background: hsl(0 0% 0% / 50%);

    & > p {
      font-size: .9rem;
    }
  }
}
/* equivalent to
  figure { margin: 0; }
  figure > figcaption { background: hsl(0 0% 0% / 50%); }
  figure > figcaption > p { font-size: .9rem; }
*/

/* & can be used on its own */
.foo {
  color: blue;
  & > .bar { color: red; }
}
/* equivalent to
  .foo { color: blue; }
  .foo > .bar { color: red; }
*/


/* or in a compound selector,
   refining the parent’s selector */
.foo {
  color: blue;
  &.bar { color: red; }
}
/* equivalent to
  .foo { color: blue; }
  .foo.bar { color: red; }
*/

/* multiple selectors in the list must all
   start with & */
.foo, .bar {
  color: blue;
  & + .baz, &.qux { color: red; }
}
/* equivalent to
  .foo, .bar { color: blue; }
  :is(.foo, .bar) + .baz,
  :is(.foo, .bar).qux { color: red; }
*/

/* & can be used multiple times in a single selector */
.foo {
  color: blue;
  & .bar & .baz & .qux { color: red; }
}
/* equivalent to
  .foo { color: blue; }
  .foo .bar .foo .baz .foo .qux { color: red; }
*/

/* Somewhat silly, but can be used all on its own, as well. */
.foo {
  color: blue;
  & { padding: 2ch; }
}
/* equivalent to
  .foo { color: blue; }
  .foo { padding: 2ch; }

  // or

  .foo {
    color: blue;
    padding: 2ch;
  }
*/

/* Again, silly, but can even be doubled up. */
.foo {
  color: blue;
  && { padding: 2ch; }
}
/* equivalent to
  .foo { color: blue; }
  .foo.foo { padding: 2ch; }
*/

/* The parent selector can be arbitrarily complicated */
.error, #404 {
  &:hover > .baz { color: red; }
}
/* equivalent to
  :is(.error, #404):hover > .baz { color: red; }
*/

/* As can the nested selector */
.foo {
  &:is(.bar, &.baz) { color: red; }
}
/* equivalent to
  .foo:is(.bar, .foo.baz) { color: red; }
*/

/* Multiple levels of nesting "stack up" the selectors */
figure {
  margin: 0;

  & > figcaption {
    background: hsl(0 0% 0% / 50%);

    & > p {
      font-size: .9rem;
    }
  }
}
/* equivalent to
  figure { margin: 0; }
  figure > figcaption { background: hsl(0 0% 0% / 50%); }
  figure > figcaption > p { font-size: .9rem; }
*/

Phương thức

/* & can be used on its own */
.foo {
  color: blue;
  & > .bar { color: red; }
}
/* equivalent to
  .foo { color: blue; }
  .foo > .bar { color: red; }
*/


/* or in a compound selector,
   refining the parent’s selector */
.foo {
  color: blue;
  &.bar { color: red; }
}
/* equivalent to
  .foo { color: blue; }
  .foo.bar { color: red; }
*/

/* multiple selectors in the list must all
   start with & */
.foo, .bar {
  color: blue;
  & + .baz, &.qux { color: red; }
}
/* equivalent to
  .foo, .bar { color: blue; }
  :is(.foo, .bar) + .baz,
  :is(.foo, .bar).qux { color: red; }
*/

/* & can be used multiple times in a single selector */
.foo {
  color: blue;
  & .bar & .baz & .qux { color: red; }
}
/* equivalent to
  .foo { color: blue; }
  .foo .bar .foo .baz .foo .qux { color: red; }
*/

/* Somewhat silly, but can be used all on its own, as well. */
.foo {
  color: blue;
  & { padding: 2ch; }
}
/* equivalent to
  .foo { color: blue; }
  .foo { padding: 2ch; }

  // or

  .foo {
    color: blue;
    padding: 2ch;
  }
*/

/* Again, silly, but can even be doubled up. */
.foo {
  color: blue;
  && { padding: 2ch; }
}
/* equivalent to
  .foo { color: blue; }
  .foo.foo { padding: 2ch; }
*/

/* The parent selector can be arbitrarily complicated */
.error, #404 {
  &:hover > .baz { color: red; }
}
/* equivalent to
  :is(.error, #404):hover > .baz { color: red; }
*/

/* As can the nested selector */
.foo {
  &:is(.bar, &.baz) { color: red; }
}
/* equivalent to
  .foo:is(.bar, .foo.baz) { color: red; }
*/

/* Multiple levels of nesting "stack up" the selectors */
figure {
  margin: 0;

  & > figcaption {
    background: hsl(0 0% 0% / 50%);

    & > p {
      font-size: .9rem;
    }
  }
}
/* equivalent to
  figure { margin: 0; }
  figure > figcaption { background: hsl(0 0% 0% / 50%); }
  figure > figcaption > p { font-size: .9rem; }
*/

Phương pháp

/* & can be used on its own */
.foo {
  color: blue;
  & > .bar { color: red; }
}
/* equivalent to
  .foo { color: blue; }
  .foo > .bar { color: red; }
*/


/* or in a compound selector,
   refining the parent’s selector */
.foo {
  color: blue;
  &.bar { color: red; }
}
/* equivalent to
  .foo { color: blue; }
  .foo.bar { color: red; }
*/

/* multiple selectors in the list must all
   start with & */
.foo, .bar {
  color: blue;
  & + .baz, &.qux { color: red; }
}
/* equivalent to
  .foo, .bar { color: blue; }
  :is(.foo, .bar) + .baz,
  :is(.foo, .bar).qux { color: red; }
*/

/* & can be used multiple times in a single selector */
.foo {
  color: blue;
  & .bar & .baz & .qux { color: red; }
}
/* equivalent to
  .foo { color: blue; }
  .foo .bar .foo .baz .foo .qux { color: red; }
*/

/* Somewhat silly, but can be used all on its own, as well. */
.foo {
  color: blue;
  & { padding: 2ch; }
}
/* equivalent to
  .foo { color: blue; }
  .foo { padding: 2ch; }

  // or

  .foo {
    color: blue;
    padding: 2ch;
  }
*/

/* Again, silly, but can even be doubled up. */
.foo {
  color: blue;
  && { padding: 2ch; }
}
/* equivalent to
  .foo { color: blue; }
  .foo.foo { padding: 2ch; }
*/

/* The parent selector can be arbitrarily complicated */
.error, #404 {
  &:hover > .baz { color: red; }
}
/* equivalent to
  :is(.error, #404):hover > .baz { color: red; }
*/

/* As can the nested selector */
.foo {
  &:is(.bar, &.baz) { color: red; }
}
/* equivalent to
  .foo:is(.bar, .foo.baz) { color: red; }
*/

/* Multiple levels of nesting "stack up" the selectors */
figure {
  margin: 0;

  & > figcaption {
    background: hsl(0 0% 0% / 50%);

    & > p {
      font-size: .9rem;
    }
  }
}
/* equivalent to
  figure { margin: 0; }
  figure > figcaption { background: hsl(0 0% 0% / 50%); }
  figure > figcaption > p { font-size: .9rem; }
*/

Để tuần tự hóa một

/* No & at all */
.foo {
  color: blue;
  .bar {
    color: red;
  }
}

/* & isn’t the first simple selector */
.foo {
  color: blue;
  .bar& {
    color: red;
  }
}

/* & isn’t the first selector of every one in the list */
.foo, .bar {
  color: blue;
  & + .baz, .qux { color: red; }
}

1. Đặt s ban đầu là chuỗi "_______10_______0" theo sau là một dấu cách (U+0020)
2. Nối vào s kết quả của việc thực hiện trên các bộ chọn được liên kết của quy tắc, theo sau là chuỗi "

   .foo {
     color: blue;
     &__bar { color: red; }
   }
   /* In Sass, this is equivalent to
      .foo { color: blue; }
      .foo__bar { color: red; }
   */
   

   1", i. e. , một KHOẢNG CÁCH duy nhất (U+0020), theo sau là DÒNG KHOẢNG LÒNG TRÁI (U+007B)
3. Đặt decls là kết quả của việc thực hiện trên các khai báo liên quan của quy tắc hoặc null nếu không có khai báo nào như vậy
4. Đặt các quy tắc là kết quả của việc thực hiện trên từng quy tắc trong danh sách

   .foo {
     color: blue;
     &__bar { color: red; }
   }
   /* In Sass, this is equivalent to
      .foo { color: blue; }
      .foo__bar { color: red; }
   */
   

   2 của quy tắc hoặc null nếu không có quy tắc nào như vậy
5. Nếu các từ chối và quy tắc đều không có giá trị, hãy thêm " }" vào s (i. e. một SPACE (U+0020) theo sau là RIGHT CURLY BRACKET (U+007D)) và trả về s
6. Nếu quy tắc là null
   1. Nối một SPACE (U+0020) vào s
   2. Nối từ chối vào s
   3. Nối " }" vào s (i. e. một KHOẢNG CÁCH duy nhất (U+0020) theo sau là ĐẶT DÒNG XOAY PHẢI (U+007D))
   4. trả lại s
7. Nếu không thì
   1. Nếu khai báo không phải là null, hãy thêm nó vào quy tắc
   2. Đối với mỗi quy tắc trong quy tắc
      1. Nối một dòng mới theo sau là hai dấu cách để s
      2. Nối quy tắc vào s
   3. Nối một dòng mới theo sau là RIGHT CURLY BRACKET (U+007D) vào s
   4. trả lại s

Các yêu cầu tuân thủ được thể hiện bằng sự kết hợp của các xác nhận mô tả và thuật ngữ RFC 2119. Các từ khóa “PHẢI”, “KHÔNG PHẢI”, “BẮT BUỘC”, “SẼ”, “SẼ KHÔNG”, “NÊN”, “KHÔNG NÊN”, “KHUYẾN NGHỊ”, “CÓ THỂ” và “TÙY CHỌN” trong các phần quy chuẩn . Tuy nhiên, để dễ đọc, những từ này không xuất hiện ở tất cả các chữ in hoa trong thông số kỹ thuật này

Tất cả các văn bản của đặc điểm kỹ thuật này là quy chuẩn ngoại trừ các phần được đánh dấu rõ ràng là không quy chuẩn, ví dụ và ghi chú.

Các ví dụ trong đặc tả này được giới thiệu với các từ “ví dụ” hoặc được tách biệt khỏi văn bản quy chuẩn với

.foo {
  color: blue;
  &__bar { color: red; }
}
/* In Sass, this is equivalent to
   .foo { color: blue; }
   .foo__bar { color: red; }
*/

Ghi chú thông tin bắt đầu bằng từ “Ghi chú” và được đặt ngoài văn bản quy phạm bằng

.foo {
  color: blue;
  &__bar { color: red; }
}
/* In Sass, this is equivalent to
   .foo { color: blue; }
   .foo__bar { color: red; }
*/

Lưu ý, đây là một lưu ý thông tin

Lời khuyên là các phần quy chuẩn được thiết kế để gợi lên sự chú ý đặc biệt và được tách biệt khỏi văn bản quy chuẩn khác với

/* & can be used on its own */
.foo {
  color: blue;
  & > .bar { color: red; }
}
/* equivalent to
  .foo { color: blue; }
  .foo > .bar { color: red; }
*/


/* or in a compound selector,
   refining the parent’s selector */
.foo {
  color: blue;
  &.bar { color: red; }
}
/* equivalent to
  .foo { color: blue; }
  .foo.bar { color: red; }
*/

/* multiple selectors in the list must all
   start with & */
.foo, .bar {
  color: blue;
  & + .baz, &.qux { color: red; }
}
/* equivalent to
  .foo, .bar { color: blue; }
  :is(.foo, .bar) + .baz,
  :is(.foo, .bar).qux { color: red; }
*/

/* & can be used multiple times in a single selector */
.foo {
  color: blue;
  & .bar & .baz & .qux { color: red; }
}
/* equivalent to
  .foo { color: blue; }
  .foo .bar .foo .baz .foo .qux { color: red; }
*/

/* Somewhat silly, but can be used all on its own, as well. */
.foo {
  color: blue;
  & { padding: 2ch; }
}
/* equivalent to
  .foo { color: blue; }
  .foo { padding: 2ch; }

  // or

  .foo {
    color: blue;
    padding: 2ch;
  }
*/

/* Again, silly, but can even be doubled up. */
.foo {
  color: blue;
  && { padding: 2ch; }
}
/* equivalent to
  .foo { color: blue; }
  .foo.foo { padding: 2ch; }
*/

/* The parent selector can be arbitrarily complicated */
.error, #404 {
  &:hover > .baz { color: red; }
}
/* equivalent to
  :is(.error, #404):hover > .baz { color: red; }
*/

/* As can the nested selector */
.foo {
  &:is(.bar, &.baz) { color: red; }
}
/* equivalent to
  .foo:is(.bar, .foo.baz) { color: red; }
*/

/* Multiple levels of nesting "stack up" the selectors */
figure {
  margin: 0;

  & > figcaption {
    background: hsl(0 0% 0% / 50%);

    & > p {
      font-size: .9rem;
    }
  }
}
/* equivalent to
  figure { margin: 0; }
  figure > figcaption { background: hsl(0 0% 0% / 50%); }
  figure > figcaption > p { font-size: .9rem; }
*/

Sự phù hợp với đặc điểm kỹ thuật này được xác định cho ba lớp phù hợp

biểu định kiểu. trình kết xuất Diễn giải ngữ nghĩa của biểu định kiểu và hiển thị các tài liệu sử dụng chúng. công cụ soạn thảo viết biểu định kiểu

Biểu định kiểu phù hợp với thông số kỹ thuật này nếu tất cả các câu lệnh sử dụng cú pháp được xác định trong mô-đun này đều hợp lệ theo ngữ pháp CSS chung và ngữ pháp riêng của từng tính năng được xác định trong mô-đun này

Trình kết xuất phù hợp với thông số kỹ thuật này nếu, ngoài việc diễn giải biểu định kiểu như được xác định bởi các thông số kỹ thuật phù hợp, nó hỗ trợ tất cả các tính năng được xác định bởi thông số kỹ thuật này bằng cách phân tích cú pháp chúng một cách chính xác và hiển thị tài liệu tương ứng. Tuy nhiên, việc UA không thể hiển thị chính xác tài liệu do hạn chế của thiết bị không làm cho UA không tuân thủ. (Ví dụ: không bắt buộc phải có UA để hiển thị màu trên màn hình đơn sắc. )

Một công cụ soạn thảo phù hợp với thông số kỹ thuật này nếu nó viết biểu định kiểu đúng về mặt cú pháp theo ngữ pháp CSS chung và ngữ pháp riêng của từng tính năng trong mô-đun này và đáp ứng tất cả các yêu cầu tuân thủ khác của biểu định kiểu như được mô tả trong mô-đun này

Để tác giả có thể khai thác các quy tắc phân tích cú pháp tương thích chuyển tiếp để gán giá trị dự phòng, trình kết xuất CSS phải coi là không hợp lệ (và ) mọi quy tắc tại, thuộc tính, giá trị thuộc tính, từ khóa và các cấu trúc cú pháp khác mà chúng không có mức hỗ trợ có thể sử dụng được. Cụ thể, tác nhân người dùng không được bỏ qua có chọn lọc các giá trị thành phần không được hỗ trợ và tôn trọng các giá trị được hỗ trợ trong một khai báo thuộc tính đa giá trị. nếu bất kỳ giá trị nào được coi là không hợp lệ (vì các giá trị không được hỗ trợ phải như vậy), CSS yêu cầu bỏ qua toàn bộ phần khai báo

Để tránh xung đột với các tính năng CSS ổn định trong tương lai, CSSWG khuyến nghị triển khai các tính năng và CSS

Sau khi thông số kỹ thuật đạt đến giai đoạn Đề xuất của ứng viên, có thể triển khai phi thử nghiệm và người triển khai nên phát hành triển khai không tiền tố của bất kỳ tính năng cấp CR nào mà họ có thể chứng minh là được triển khai chính xác theo thông số kỹ thuật

Để thiết lập và duy trì khả năng tương tác của CSS trong quá trình triển khai, Nhóm làm việc CSS yêu cầu các trình kết xuất CSS không thử nghiệm gửi báo cáo triển khai (và, nếu cần, các trường hợp thử nghiệm được sử dụng cho báo cáo triển khai đó) cho W3C trước khi phát hành triển khai không có tiền tố của bất kỳ . Các trường hợp thử nghiệm được gửi tới W3C sẽ được Nhóm làm việc CSS xem xét và chỉnh sửa

Bạn có thể tìm thêm thông tin về cách gửi bản thử nghiệm và báo cáo triển khai trên trang web của Nhóm làm việc CSS tại https. //www. w3. org/Kiểu/CSS/Thử nghiệm/. Các câu hỏi nên được chuyển đến public-css-testsuite@w3. danh sách gửi thư tổ chức

[CSS-COLOR-4]Tab Atkins Jr. ; . Mô-đun màu CSS cấp 4. 1 tháng sáu 2021. WD. URL. https. //www. w3. org/TR/css-color-4/[CSS-ĐIỀU KIỆN-3]David Baron; . Mô-đun quy tắc có điều kiện CSS Cấp độ 3. 8 tháng mười hai 2020. CR. URL. https. //www. w3. org/TR/css-conditional-3/[CSS-SYNTAX-3]Tab Atkins Jr. ; . Mô-đun Cú pháp CSS Cấp 3. 16 Tháng bảy 2019. CR. URL. https. //www. w3. org/TR/css-syntax-3/[CSS21]Bert Bos; . Cascading Style Sheets Cấp 2 Sửa đổi 1 (CSS 2. 1) Thông số kỹ thuật. 7 tháng sáu 2011. GHI. URL. https. //www. w3. org/TR/CSS21/[CSSOM-1]Daniel Glazman; . Mô hình đối tượng CSS (CSSOM). 26 Tháng tám 2021. WD. URL. https. //www. w3. org/TR/cssom-1/[RFC2119]S. Bradner. Các từ khóa để sử dụng trong RFC để chỉ ra các mức yêu cầu. tháng 3 năm 1997. Thực tiễn tốt nhất hiện tại. URL. https. // trình theo dõi dữ liệu. vietf. org/doc/html/rfc2119[SELECTORS4]Elika Etemad; . Bộ chọn cấp 4. 21 Tháng mười một 2018. WD. URL. https. //www. w3. org/TR/selectors-4/[WebIDL]Boris Zbarsky. IDL web. 15 Tháng mười hai 2016. ED. URL. https. // này máy quay. github. io/webidl/

[CSS-COLOR-3]Tantek Çelik; . Mô-đun màu CSS cấp 3. 5 tháng 8 năm 2021. GHI. URL. https. //www. w3. org/TR/css-color-3/[HTML]Anne van Kesteren; . Tiêu chuẩn HTML. Chất lượng cuộc sống. URL. https. //html. thông số kỹ thuật. cái gì. org/nhân/

Bạn có thể đặt một lớp bên trong một lớp trong CSS không?

Các lớp CSS có thể được lồng vào nhau không?

Làm cách nào để tạo kiểu cho hai lớp trong CSS?