programming css

Bạn có thể lồng vào CSS không?

Giải thích cách lồng và nhóm trong CSS

Cải thiện bài viết

Lưu bài viết

Thích bài viết

Độ khó. Chuyên gia
Cập nhật lần cuối. 31 tháng 8 năm 2021

Đọc

Bàn luận

khóa học

Luyện tập

Băng hình

Cải thiện bài viết

Lưu bài viết

Khái niệm Nesting và Grouping rất quan trọng đối với nhà phát triển web để viết mã chính xác. Bạn có thể nhóm và lồng các mục để giảm số lượng mã bạn viết, điều này sẽ giảm độ dài mã của bạn và cho phép các trang tải nhanh hơn. Đó là một cách để đơn giản hóa mã của bạn. Với sự trợ giúp của Nesting và Grouping, chúng ta có thể cụ thể hơn trong mã của mình. Trong bài viết này, chúng ta sẽ xem cách lồng & nhóm giúp tối ưu hóa mã và làm cho mã hiệu quả cũng như tăng khả năng đọc

làm tổ. Thuộc tính lồng nhau trong CSS tạo điều kiện lồng một quy tắc kiểu bên trong một quy tắc kiểu khác, với bộ chọn của quy tắc con có liên quan đến bộ chọn của quy tắc cha. Nó giúp tăng tính mô-đun và khả năng bảo trì của các biểu định kiểu CSS và do đó tăng khả năng đọc mã tổng thể. Chẳng hạn, nếu bạn viết một mô-đun CSS có cấu trúc, thay vì chỉ định các bộ chọn riêng biệt cho mọi phần tử HTML, tức là bằng cách sử dụng nhiều lớp hoặc bộ chọn ID, bạn có thể chỉ cần chỉ định các thuộc tính cho các bộ chọn trong các bộ chọn khác. Trong khi lồng các thuộc tính CSS, các phần tử HTML tạo thành một hình dạng cấu trúc cây. Nesting là một lối tắt để tạo quy tắc CSS cho nhiều bộ chọn cho một thuộc tính cụ thể. Vì vậy, thay vì viết lại cùng một bộ thuộc tính cho các bộ chọn khác nhau, chúng ta có thể chỉ cần lồng các bộ chọn bên trong các bộ chọn khác. Vì lý do này, chúng tôi không chỉ giảm kích thước của mã mà còn giảm thời gian tải tổng thể

cú pháp

class1_selector class2_selector id_selector  {
  property: value;
}

Ví dụ

table tr th {
  background-color: beige;
}

Tiếp cận

Chọn bộ chọn id/class và thêm dấu cách để phân tách cái này với cái kia
Thêm các thuộc tính phong cách cho các phần tử

Ghi chú. Hãy cụ thể với thứ tự lồng nhau

Example: In this example, we will nest the tag inside the

tag and tag inside the tag.

HTML

table tr th {
  background-color: beige;
}

________ 103 ________ 104 ________ 105

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

2____103

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

2____180____14

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

0____105

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

2____103

table tr th {
  background-color: beige;
}

023

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

026

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

03____1029

table tr th {
  background-color: beige;
}

030

table tr th {
  background-color: beige;
}

031

table tr th {
  background-color: beige;
}

032

table tr th {
  background-color: beige;
}

033

table tr th {
  background-color: beige;
}

029

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

037

table tr th {
  background-color: beige;
}

2____180____1023

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

2____103

table tr th {
  background-color: beige;
}

045

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

031

table tr th {
  background-color: beige;
}

048

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

03____1052

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

03____1056

table tr th {
  background-color: beige;
}

057

table tr th {
  background-color: beige;
}

056

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

03____1056

table tr th {
  background-color: beige;
}

063

table tr th {
  background-color: beige;
}

056

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

80____1052

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

03____1052

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

03____1036

table tr th {
  background-color: beige;
}

037

table tr th {
  background-color: beige;
}

036

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

03____1036

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

036

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

80____1052

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

03____1052

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

03____1036

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

036

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

03____1036

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

036

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

80____1052

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

03____1052

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

03____1036

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

036

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

03____1036

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

036

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

80____1052

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

2____180____1045

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

Output: We got tag as green color and of beige color using nesting.

làm tổ

nhóm. Nhóm được sử dụng để chọn nhiều phần tử cùng nhau để áp dụng các thuộc tính tạo kiểu chung cho chúng. Vì lý do này, nó giúp giảm độ dài của mã có nhiều bộ chọn có cùng thuộc tính. Điều này làm cho mã dễ đọc. Thời gian tải trang và thời gian phát triển mã cũng giảm khi sử dụng nhóm.

Thay vì viết đoạn mã dài này, hãy chỉ định các thuộc tính giống nhau cho các bộ chọn khác nhau

table tr th {
  background-color: beige;
}

Chúng ta có thể nhóm chúng lại và viết như thế này và chúng ta cần dấu phẩy [,] để nhóm các bộ chọn khác nhau

table tr th {
  background-color: beige;
}

Tiếp cận

Add tag inside tag.
Add various tags inside tag with content.
Inside tag, we can group our selectors containing the same properties.

Ví dụ. Trong ví dụ này, chúng tôi sẽ nhóm các bộ chọn khác nhau lại với nhau

HTML

table tr th {
  background-color: beige;
}

________ 103 ________ 104 ________ 105

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

2____103

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

2____180____14

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

0____105

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

2____103

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

2____103

table tr th {
  background-color: beige;
}

000

table tr th {
  background-color: beige;
}

001

table tr th {
  background-color: beige;
}

000

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

2____103

table tr th {
  background-color: beige;
}

023

table tr th {
  background-color: beige;
}

008

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

03____1029

table tr th {
  background-color: beige;
}

030

table tr th {
  background-color: beige;
}

031

table tr th {
  background-color: beige;
}

032

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

017

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

80____1029

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

2____180____1023

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

2____103

table tr th {
  background-color: beige;
}

023

table tr th {
  background-color: beige;
}

030

table tr th {
  background-color: beige;
}

023

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

table tr th {
  background-color: beige;
}

đầu ra

bộ chọn nhóm có cùng thuộc tính

Sự khác biệt giữa Nesting và Grouping

S. Không

làm tổ

nhóm

Thuộc tính lồng tạo điều kiện lồng một quy tắc kiểu bên trong một quy tắc kiểu khác, với bộ chọn của quy tắc con có liên quan đến bộ chọn của quy tắc cha

Thuộc tính nhóm cung cấp cùng một thuộc tính với các giá trị cho một số bộ chọn tại một thời điểm

Nó có thể giúp đơn giản hóa & quản lý các thuộc tính cho các phần tử khác nhau cùng một lúc nhưng có thể phức tạp nếu số lượng phần tử lồng nhau chứa các thuộc tính giống nhau tăng lên. Có thể khó quản lý một tài sản làm tổ như vậy

Thật đơn giản để áp dụng các thuộc tính cho số lượng phần tử khác nhau tại một thời điểm & có thể được quản lý dễ dàng.

Trong trường hợp này, nếu chúng ta cần sửa đổi thuộc tính cho bất kỳ phần tử cụ thể nào, tức là phần tử cha hoặc phần tử con trong CSS, thì chúng ta cần thay đổi thuộc tính đó theo cách thủ công cho phần tử cụ thể đó, nếu nó nằm trong phần lồng nhau. Đối với mã kích thước lớn, đó có thể là một cách không hiệu quả để quản lý các thuộc tính CSS

Bạn có thể lồng mọi thứ vào CSS không?

Giống như trong HTML, nơi bạn có thể có các phần tử lồng bên trong các phần tử khác, điều tương tự cũng có thể được thực hiện trong CSS .

Chúng ta có thể lồng các lớp trong CSS không?

CSS lồng nhau là gì? . Như bạn có thể thấy từ cả hai mẫu mã ở trên, việc lồng đang đặt một bộ chọn bên trong một bộ chọn khác. Lồng ghép giúp bạn nhóm các kiểu có liên quan và viết CSS theo cấu trúc phân cấp lồng nhau. This syntax has been possible with CSS preprocessors like Sass and Less. As you can see from both code samples above, nesting is enclosing a selector inside another selector. Nesting helps you to group related styles and write CSS in a nested hierarchy.

Làm tổ nghĩa là gì trong CSS?

Lồng nhau là lối tắt để tạo quy tắc CSS cho nhiều bộ chọn cho một thuộc tính cụ thể . Vì vậy, thay vì viết lại cùng một bộ thuộc tính cho các bộ chọn khác nhau, chúng ta có thể chỉ cần lồng các bộ chọn bên trong các bộ chọn khác.

Làm cách nào để áp dụng CSS cho phần tử lồng nhau?

Bộ chọn CSS - Cách sử dụng Bộ chọn phần tử lồng CSS . Nó chọn các phần tử bên trong các phần tử. Chúng ta có thể sử dụng Bộ chọn hậu duệ để chọn một phần tử dựa trên trạng thái của nó là phần tử con của một phần tử khác .

HTML

S. Không

làm tổ

nhóm

Bạn có thể lồng mọi thứ vào CSS không?

Chúng ta có thể lồng các lớp trong CSS không?

Làm tổ nghĩa là gì trong CSS?

Làm cách nào để áp dụng CSS cho phần tử lồng nhau?

Bài Viết Liên Quan

Toplist mới

Bài mới nhất

Chủ Đề