CSS lồng nhau các lớp: Cách tạo chúng trong CSS gốc – css bộ chọn con lồng nhau

Các lớp lồng nhau trong CSS cho phép bạn tạo mã phức tạp hơn trong CSS. Điều này làm giảm sự phụ thuộc của bạn vào các bộ tiền xử lý CSS. Đọc bài viết này để tìm hiểu về nó.

Bạn đang xem : bộ chọn con lồng nhau css

Các cấp độ của css lồng vào nhau Các lớp CSS lồng nhau là cách để viết các lớp CSS bên trong nhau và do đó, tạo nhiều mã CSS nâng cao hơn. Vì các lớp lồng nhau cho phép bạn nhóm các lớp có liên quan , điều này dẫn đến mã có tổ chức hơn.

Hãy tiếp tục đọc vì chúng tôi sẽ chỉ cho bạn cách viết mã CSS có tổ chức hơn với CSS lồng nhau.

Các lớp CSS lồng nhau: Thông tin giới thiệu

Các lớp CSS lồng nhau là một cách để viết lớp CSS bên trong một lớp. Ngoài ra, bạn có thể gọi chúng là các lớp lồng ghép CSS.

– CSS Nesting là gì?

Việc lồng CSS cho phép bạn lồng một quy tắc kiểu CSS vào một quy tắc khác . Bộ chọn quy tắc con phải có mối quan hệ với bộ chọn quy tắc mẹ. Trước khi lồng CSS, bạn chỉ có thể thực hiện việc này bằng bộ xử lý trước CSS.

Cách lồng bộ chọn trong CSS: Giải thích toàn bộ quy trình

Mô-đun lồng CSS xác định một bộ chọn lồng , được viết là “& amp;” (dấu và). Bộ chọn lồng này cung cấp một tham chiếu đến quy tắc mẹ. Hơn nữa, hành vi này là điểm chính đằng sau việc lồng CSS .

– Mã CSS Không lồng ghép

Hãy cùng xem một ví dụ cho thấy cách lồng các bộ chọn . Đầu tiên, chúng tôi sẽ xem xét một số mã CSS không lồng nhau và chúng tôi sẽ hiển thị các mã lồng nhau bằng nhau. Vì vậy, để nhắc lại, CSS sau không có lồng ghép:

button.btn {
màu: # 1560bd;
nền: #ffffff;
chuyển tiếp: 0,2 giây dễ dàng;
}
button.btn: di chuột {
màu: #ffffff;
nền: # 1560bd;
}
button.btn: tiêu điểm {
/ * Các kiểu lấy nét * /
}
button.btn-group {
/ * Kiểu nhóm nút * /
}
button.btn-primary {
/ * Kiểu chính của nút * /
}

– Mã CSS có lồng

Đây là cùng một mã với CSS lồng nhau :

.btn {
màu: # 1560bd;
nền: #ffffff;
chuyển tiếp: 0,2 giây dễ dàng;
& amp;: di chuột {
màu: #ffffff;
nền: # 1560bd;
}
& amp;: tiêu điểm {
/ * Các kiểu lấy nét * /
}
& amp; -nhóm {
/ * Kiểu nhóm nút * /
}
& amp; -primary {
/ * Kiểu chính của nút * /
}
}

Từ đoạn mã trên, hãy lưu ý rằng bộ chọn lồng (& amp;) đề cập đến bộ chọn chính. Ngoài ra, chúng ta nên lưu ý rằng bộ chọn phải ở đầu.

“& amp;” Bộ chọn

CSS “& amp;” bộ chọn cho phép bạn lồng các quy tắc lại với nhau. Hơn nữa, điều này giống như lồng SASS, nhưng nó không giống nhau. Từ khối mã trước đó, rõ ràng là bạn có thể sử dụng “& amp;” của riêng nó để làm tổ. Khối mã tiếp theo này cho biết cách thực hiện việc này:

.parent {
màu: # 1560bd;
& amp; & gt; .child {color: # ff0000; }
}
/ * Điều này bằng:
.parent {color: # 1560bd; }
.parent & gt; .child {color: # ff0000; }
* /
Bạn cũng có thể sử dụng nó trong bộ chọn CSS phức hợp như được trình bày chi tiết trong khối mã tiếp theo:
.parent {
màu: # 1560bd;
& amp; .child {color: red; }
}
/ * Điều này bằng:
.parent {color: # 1560bd; }
.parent.child {color: # ff0000; }
* /

Ngoài ra, nó có thể áp dụng trong nhiều danh sách của bộ chọn, nhưng tất cả các bộ chọn phải bắt đầu bằng “& amp;”. Khối mã tiếp theo có thêm chi tiết về cách thực hiện điều này.

.parent, .child {
màu: # 1560bd;
& amp; + .child-1, & amp; .child-2 {color: # ff0000; }
}
/ * Điều này bằng:
.parent, .child {color: # 1560bd; }
: is (.parent, .child) + .child-1,
: is (.parent, .child) .child-2 {color: # ff0000; }
* /

Nhiều cấp độ làm tổ

Nhiều cấp độ lồng nhau sẽ xếp chồng lên nhau các bộ chọn. Vì không có giới hạn về độ sâu của việc lồng CSS của bạn, bạn không nên đi quá sâu khiến việc lồng ghép trở nên khó đọc.

< p class = "ezoic-ad" id = "div-gpt-ad-Posoniseverything_net-Large-leaderboard-2-0">

Đoạn mã tiếp theo là ví dụ về nhiều lồng nhau :

hình {
lề: 0;
& amp; & gt; mô tả {
nền: #fafafa;
& amp; & gt; p {
font-size: 0.9rem;
}
}
}
/ * Điều này bằng:
hình {margin: 0; }
hình & gt; figcaption {background: #fafafa; }
hình & gt; mô tả & gt; p {font-size: 0.9rem; }
* /

CSS Lồng không hợp lệ

Trong CSS lồng, bất kỳ kiểu CSS nào bạn muốn áp dụng phải đứng trước bất kỳ kiểu lồng nào. Ví dụ: lồng ghép sau không hợp lệ :

div {
background-color: #ffffff;
& amp; p {
màu: # ff0000;
}
đường viền: 1px solid;
}

Trình duyệt web sẽ bỏ qua khai báo đường viền sau khi lồng.

Quy tắc CSS làm tổ @nest

Quy tắc CSS @nest cung cấp cho bạn tính linh hoạt của việc lồng hơn. Theo mặc định, bộ chọn lồng (& amp;) phải ở đầu bộ chọn lồng. Với quy tắc @nest , bạn không bắt buộc phải đặt bộ chọn lồng vào đầu. Điều này có nghĩa là bạn có thể chỉ định nơi bạn muốn lồng bộ chọn CSS.

Xem Thêm  Sự kiện thay đổi JavaScript - javascript trên đầu vào thay đổi

Khối mã tiếp theo cho bạn biết cách sử dụng quy tắc @nest:

.header {
background-color: #ffffff;
@nest .darkHeader & amp; {
màu nền: # 1560bd;
}
}
Đây là điều tương tự mà không có CSS ​​lồng vào nhau:
.header {
background-color: #ffffff;
}
.darkHeader .header {
màu nền: # 1560bd;
}

– Quy tắc CSS @nest không hợp lệ

Quy tắc CSS @nest yêu cầu sự hiện diện của bộ chọn lồng (& amp;) trong bộ chọn lồng nhau. Nếu thiếu quy tắc này, quy tắc @nest sẽ không hợp lệ.

Ví dụ sau không hợp lệ vì nó không có bộ chọn lồng (& amp;):

.parent {
màu: # ff0000;
@nest .child {
màu: # 1560bd;
}
}

Làm tổ có điều kiện

Ngoài ra, ngoài bộ chọn lồng (& amp;) và quy tắc @nest, bạn có thể viết CSS lồng nhau bằng CSS lồng có điều kiện . Trong lồng ghép có điều kiện, bạn có thể sử dụng quy tắc @nest, nhưng quy tắc kiểu thông thường không hợp lệ.

Tính năng lồng nhau có điều kiện hỗ trợ sử dụng trực tiếp các thuộc tính CSS . Bạn sẽ tìm thấy một ví dụ về lồng có điều kiện trong mã tiếp theo:

.parent {
hiển thị: lưới;
@media (hướng: ngang) {
grid-auto-flow: column;
}
}
/ * Nó bằng
.foo {display: grid; }
@media (hướng: ngang) {
& amp; {
grid-auto-flow: column;
}
}
* /
/ * Ngoài ra, nó bằng:
.parent {display: grid; }
@media (hướng: ngang) {
.parent {
grid-auto-flow: column;
}
}
* /

Ngoài ra, bạn có thể lồng các điều kiện như được hiển thị trong khối mã tiếp theo:

.parent {
hiển thị: lưới;
@media (hướng: ngang) {
grid-auto-flow: column;
@media (min-inline-size & gt; 1024px) {
max-inline-size: 1024px;
}
}
}
/ * Điều này bằng:
.parent {display: grid; }
@media (hướng: ngang) {
.parent {
grid-auto-flow: column;
}
}
@media (hướng: ngang) và (kích thước tối thiểu trong dòng & gt; 1024px) {
.parent {
max-inline-size: 1024px;
}
}
* /

– Tổ hợp có điều kiện không hợp lệ

Tính năng lồng ghép có điều kiện không hợp lệ khi thiếu bộ chọn lồng ghép .

Trong cách lồng có điều kiện tiếp theo, không phải tất cả các bộ chọn đều chứa bộ chọn lồng. Do đó, việc lồng không hợp lệ:

/ * Thị không hợp lệ * /
.parent {
màu: # ff0000;
@media (chiều rộng tối thiểu: 480px) {
& amp; h1, h2 {color: # 1560bd; }
}
}

Khi bạn đang sử dụng @nest trong lồng ghép có điều kiện, hãy đảm bảo bạn cung cấp cho nó một đoạn dạo đầu của bộ chọn ; nếu không, nó sẽ làm mất hiệu lực của việc lồng có điều kiện.

Trong mã sau, lồng ghép có điều kiện không hợp lệ. Lý do là quy tắc @nest yêu cầu một bộ chọn. Thay vào đó, nó có một nhóm có điều kiện:

.parent {
màu: # ff0000;
@nest @media (min-width: 480px) {
& amp; {màu: # 1560bd; }
}
}

Lồng các truy vấn phương tiện

Đó là cách được đề xuất để viết các quy tắc CSS khác trước các truy vấn phương tiện. Do đó, bạn có thể viết một bộ chọn ở dòng một. Sau đó, trên dòng 100, bạn viết một truy vấn phương tiện sẽ hoạt động trên đó. Với CSS lồng vào nhau, bạn có thể viết một truy vấn phương tiện tại điểm khai báo bộ chọn .

Ví dụ: cách lồng sau sẽ thay đổi hướng flex của div ở độ rộng 35em trở lên:

div {
flex-direction: column;
@media (chiều rộng tối thiểu: 35em) {
& amp; {
flex-direction: row;
}
}
}

Trong đoạn mã trên, trình duyệt web sẽ thay thế bộ chọn lồng (& amp;) bằng div. Điều này có nghĩa là mã sau giống với phiên bản lồng nhau :

div {
flex-direction: column;
}
@media (chiều rộng tối thiểu: 35em) {
div {
flex-direction: row;
}
}

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

Có một vài khác biệt giữa lồng ghép CSS và lồng ghép SASS . Ví dụ: trong khối mã sau, trình duyệt web sẽ không sử dụng các kiểu sau quy tắc lồng trong CSS:

bài viết {
màu: # 00ff00;
& amp; {màu: # 1560bd; }
màu: # ff0000;
}

Tuy nhiên, trong SASS, trình duyệt web sẽ áp dụng “color: # ff0000”.

Điều gì cần tránh

Điều đầu tiên bạn nên tránh là lồng ghép quá mức. Chúng tôi đã nói về vấn đề này trong “Nhiều cấp độ lồng ghép” nhưng chúng tôi sẽ trình bày lại nó một lần nữa. Lý do bạn nên tránh điều này là CSS lồng vào nhau cho phép bạn viết mã CSS của mình theo cách mà bạn sẽ làm khi sử dụng bộ xử lý trước CSS. Do đó, nó có thể cám dỗ bạn viết các kiểu lồng nhau CSS sau:

Xem Thêm  Focus () - GeeksforGeeks - javascript tập trung vào lĩnh vực

.main {
& amp; .section {
nền: # ff0000;
& amp; ul {
nền: # 00ff00;
& amp; .list-item {
font-size: 1em;
& amp; .page-link {
màu: # ffc0cb;
& amp; : di chuột {
màu: # 1560bd;
}
}
}
}
}
Khối mã tiếp theo bằng với mã trước đó.
.main .section {
nền: # ff0000;
}
.main .section ul {
nền: # 00ff00;
}
.main .section ul .list {
font-size: 1em;
}
.main .section ul .list .page-link {
màu: # ffc0cb;
}
.main .section ul .list .page-link: hover {
màu: # 1560bd;
}

Quan sát về bộ chọn cuối cùng cho thấy nó có độ đặc hiệu cao hơn. Điều này làm cho việc ghi đè các phong cách trở nên khó khăn. Do đó, bạn nên giữ tổ ở độ sâu tối đa là ba tầng.

Các lớp CSS lồng nhau và Đặc tính CSS

Tính đặc hiệu của CSS là một tập hợp các quy tắc chi phối việc áp dụng các kiểu CSS cho một phần tử. Khi bạn áp dụng nhiều bộ chọn trên một phần tử, trình duyệt web sẽ chọn bộ chọn cụ thể nhất.

Việc lồng CSS có thể tạo ra CSS có độ đặc hiệu cao . Điều này sẽ làm cho CSS khó ghi đè và đồng thời, nó sẽ ghi đè hầu hết các bộ chọn. Ví dụ: trong khối mã tiếp theo, chúng ta có nhiều lớp CSS lồng nhau:

chính {
/ * kiểu css * /
& amp; #intro {
/ * kiểu css * /
& amp; .news-items {
/ * kiểu css * /
& amp; div.news-item {
/ * kiểu css * /
& amp; h2 {
/ * kiểu css * /
}
& amp; p {
/ * kiểu css * /
& amp; .meta-chi tiết {
/ * kiểu css * /
& amp; span.date {
/ * kiểu css * /
}
}
& amp; + p {
/ * kiểu css * /
}
}
& amp; một {
/ * kiểu css * /
}
}
}
}
}

Từ khối mã trước đó, bạn có một lớp được chọn trong lớp. Ngoài ra, bạn sẽ thấy mỗi bộ chọn có vẻ đơn giản, đó là thứ có thể nhắc bạn tăng sự lồng ghép. Hơn nữa, dòng mã tiếp theo là quy tắc CSS cho CSS lồng nhau trước đó:

main #intro .news-items div.news-item p.meta + p {}

Mã trước đó có đặc điểm là “Một, Ba, Bốn”. Việc lồng nhiều sẽ tạo ra nhiều bộ chọn phức tạp hơn và do đó, bạn có thể giải quyết thành CSS! important để làm cho một số thứ hoạt động.

< / p>

Cách ngăn chặn các vấn đề về tính cụ thể

Tính cụ thể các vấn đề có thể phát sinh khi bạn không ngăn mình lồng ghép quá sâu . Nếu bạn muốn ngăn các vấn đề về tính cụ thể, hãy làm như sau:

  • Hạn chế việc lồng nhau
  • Thoát ra khỏi tổ ấm

– Giới hạn việc làm tổ

Giữ lồng ở mức nhỏ. Như chúng tôi đã đề cập trước đây, chúng tôi khuyên bạn nên dừng lại ở ba cấp độ lồng nhau . Điều này cho phép bạn tạo kiểu cho vùng chứa cấp cao nhất, con và cháu của nó.

– Thoát khỏi việc làm tổ

Sau khi bạn hạn chế việc lồng vào nhau, bạn nên phá cách và tạo kiểu độc lập cho các mục khác. Nếu thiết kế của bạn dựa trên thành phần, bạn có thể phân chia giữa các kiểu bố cục và thành phần.

Ưu điểm

Tính năng lồng ghép trong CSS giúp dễ dàng nhóm các kiểu có liên quan , nhưng có lợi thế khác . Đó là:

  • Bạn có thể viết CSS theo hệ thống phân cấp lồng nhau
  • Việc lồng CSS cho phép bạn tránh lặp lại mã
  • Việc lồng nhau trong CSS giúp giảm bớt cách thức cho các bảng định kiểu có thể bảo trì
  • Nó làm tăng thời gian phát triển vì không cần thiết lập bộ xử lý trước
  • Tính năng lồng ghép trong CSS cho phép bạn lồng các truy vấn phương tiện

Bạn có thể sử dụng CSS lồng trong bất kỳ trình duyệt web nào không?

Tại thời điểm viết bài, CSS lồng vào không được hỗ trợ trong bất kỳ trình duyệt web nào. Tuy nhiên, PostCSS có một plugin được gọi là PostCSS Preset Env. PostCSS sẽ sử dụng plugin này để chuyển đổi CSS lồng nhau của bạn thành CSS sẽ chạy trong các trình duyệt hiện tại.

Kết luận

Trong bài viết này, bạn đã biết cách CSS lồng vào nhau sẽ thay đổi cách chúng ta viết CSS khi CSS xuất hiện trong trình duyệt web. Trong khi bạn chờ đợi sự hỗ trợ của trình duyệt web, sau đây là tóm tắt về những điều sẽ xảy ra:

  • Bạn có thể lồng các lớp và bộ chọn CSS
  • Dấu và (& amp;) là bộ chọn lồng ghép CSS
  • Tính năng lồng trong CSS có quy tắc @nest cho phép bạn chỉ định vị trí lồng bộ chọn CSS
  • Tính năng lồng trong CSS cho phép nhiều cấp độ lồng nhau
  • Các kiểu sau quy tắc lồng CSS không hợp lệ
  • Sự khác biệt chính giữa CSS lồng và SASS là việc áp dụng một số kiểu. Tính năng lồng trong CSS sẽ bỏ qua các kiểu sau các quy tắc lồng, trong khi SASS thì không
  • Bạn nên tránh lồng ghép CSS cấp sâu
  • Việc lồng ghép CSS có thể dẫn đến tính cụ thể cao
  • Nếu bạn muốn ngăn các vấn đề về tính cụ thể trong tính năng lồng ghép trong CSS, hãy hạn chế các cấp độ lồng nhau và thoát ra khỏi lồng ghép
  • Tính năng lồng ghép CSS chưa khả dụng trong tất cả các trình duyệt web nhưng bạn có thể sử dụng PostCSS có chứa plugin cho phép bạn chuyển đổi CSS lồng nhau thành mã được sử dụng trong các trình duyệt gần đây
Xem Thêm  Nối từ điển Python: Cách thêm cặp khóa / giá trị - python thêm vào một mệnh đề

Các lớp lồng nhau trong css CSS lồng nhau sẽ thay đổi cách chúng tôi viết CSS và giờ bạn đã sẵn sàng sử dụng nó khi có sẵn để sử dụng trên trình duyệt yêu thích của bạn!

5/5 – (14 phiếu bầu)


Xem thêm những thông tin liên quan đến chủ đề css bộ chọn con lồng nhau

Hai Giọng Hát Tân Cổ Làm Rung Động Triệu Con Tim | Mai Phương Thảo & Cổ Thạch Xuyên – Tìm Em Nơi Đâu

alt

  • Tác giả: Nhạc Vàng Trữ Tình
  • Ngày đăng: 2019-08-16
  • Đánh giá: 4 ⭐ ( 4278 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hai Giọng Hát Tân Cổ Làm Rung Động Triệu Con Tim | Mai Phương Thảo & Cổ Thạch Xuyên – Tìm Em Nơi Đâu
    ► Theo dõi kênh Nhạc Vàng Trữ Tình: https://goo.gl/YN48d3
    Kênh Nhạc Vàng Trữ Tình là kênh tuyển tập những bài hát hay về những thể loại: nhạc trữ tình,nhạc bolero,nhạc vàng,nhạc sến và các bài hát nhạc đỏ,nhạc tiền chiến những bài hát đó đã là lên tên tuổi để đời của các ca sĩ như Thu Hien, Quang Linh, Van Khanh…
    Mời các bạn đón xem video.
    ———————————————-
    ►Nhạc Bolero Xưa Hay Nhất: https://goo.gl/rh7C8m
    ►Liên Khúc Nhạc Vàng Trữ Tình: https://goo.gl/0lpNMt
    ►Anh Thơ ft Thu Hiền Tuyển Chọn: https://goo.gl/U5wBnA

    ►Tuyển Tập Nhạc Quê Hương: https://goo.gl/TDZomf
    ►Những Ca Khúc Cách Mạng: https://goo.gl/bhcnQn
    ►Nhạc Trữ Tình Hay Nhất: https://goo.gl/oAaM2h

    ►Album Nhạc Trữ Tình Chọn Lọc: https://goo.gl/w1ICds
    ►Nhạc Vàng Trữ Tình Chọn Lọc: https://goo.gl/3mJt0f
    ►Tuyển Tập Nhạc Trẻ Hot Nhất 2016: https://goo.gl/aDYXeF

    ►NSND Thu Hiền Hay Nhất: https://goo.gl/f7mYUS
    ►Album Vân Khánh Hay Nhất: https://goo.gl/Hhntf9
    ►Những Bài Hát Của Hồng Nhung: https://goo.gl/cTx3lA

    ►Liên Khúc Dân Ca Trữ Tình Hay: https://goo.gl/dDOJt6
    ►Tuyển Chọn Nhạc Hạnh Nguyên: https://goo.gl/sZXpvw
    ►Nhạc Ánh Tuyết Chọn Lọc: https://goo.gl/u4Gu0d
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Các bạn hãy để lại nhận xét góp ý để chúng tôi có thể hoàn thiện và đưa đến khán giả những video chất lượng tốt nhất để phục vụ quý vị khán giả
    Nhạc Vàng Trữ Tình chúc các bạn nghe nhạc vui vẻ!
    ► Copyright © 2017 BH Media Corp

Selector trong CSS là gì? Bạn có thể không biết rất nhiều selector thú vị đấy!

  • Tác giả: freehost.page
  • Đánh giá: 3 ⭐ ( 7719 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

30 Bộ chọn CSS bạn phải thuộc lòng

  • Tác giả: code.tutsplus.com
  • Đánh giá: 5 ⭐ ( 2321 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Như vậy, bạn đã học được các bộ chọn cơ bản id, lớp và phần tử con – và sau đó bạn nghĩ rằng bao nhiêu đó đã đủ? Nếu vậy, bạn đang bỏ lỡ một cấp độ linh hoạt lớn hơn. Mặc dù rất nhiều các bộ chọn…

Chuẩn BEM trong CSS

  • Tác giả: blog.haposoft.com
  • Đánh giá: 5 ⭐ ( 2870 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: BEM là tên viết tắt của: Block, Element, Modifier, là một phương pháp giúp bạn tạo ra các components có thể tái sử dụng và chia sẻ code trong phát triển front-end.

Tìm hiểu về Bộ chọn hậu duệ CSS

  • Tác giả: www.greelane.com
  • Đánh giá: 5 ⭐ ( 3608 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bộ chọn hậu duệ CSS là một trong bốn bộ tổ hợp CSS. Hướng dẫn này giải thích cách nó làm cho HTML của bạn hiệu quả và hữu ích hơn.

Các kiểu CSS lồng nhau ~ Tôi đã thấy khái niệm này ở đâu trước đây?

  • Tác giả: qastack.vn
  • Đánh giá: 4 ⭐ ( 6705 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] BÀI CSS ngôn ngữ bản định kiểu năng động được thiết kế bởi Alexis Sellier. Nó…

Tổng hợp các bộ chọn trong CSS

  • Tác giả: timoday.edu.vn
  • Đánh giá: 3 ⭐ ( 4924 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tổng hợp chi tiết toàn bộ các bộ chọn được sử dụng trong định kiểu với CSS như bộ chọn phần tử, bộ chọn id, bộ chọn class, ngoài ra còn có nhiều bộ chọn khác.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình