Cho đến nay, bạn đã sử dụng các bộ chọn; chúng được sử dụng để nhắm mục tiêu các phần tử cụ thể hoặc các phần tử tập thể có ID hoặc lớp cụ thể. Đây là một tính năng khá mạnh, nhưng nếu bạn muốn giới hạn tính năng này ở một số phần cụ thể của trang thì sao? Trong chương này, bạn sẽ tìm hiểu về bộ tổ hợp con cháu và cách hoạt động của nó.

Bạn đang xem : bộ chọn css con của lớp

Cho đến nay, bạn đã sử dụng các bộ chọn để nhắm mục tiêu
phần tử hoặc phần tử tập thể với một ID hoặc lớp cụ thể. Nó là
một tính năng khá mạnh, nhưng điều gì sẽ xảy ra nếu bạn muốn giới hạn điều này
tính năng của một số phần cụ thể của trang? Trong chương này, bạn
sẽ tìm hiểu về bộ tổ hợp con cháu và cách hoạt động của nó.

Sử dụng Bộ chọn con cháu trong CSS

Bộ chọn con cháu cho phép bạn thêm giới hạn vào bất kỳ
các phần tử HTML được nhắm mục tiêu, dành cho những phần tử là con đẻ hoặc
con cháu của một số nguyên tố khác. Vậy tại sao chúng ta gọi nó là hậu duệ
tổ hợp? Combinators là một số khái niệm được sử dụng để giải thích
sự liên kết hoặc kết nối giữa các bộ chọn. Bộ chọn trong CSS
có thể có nhiều hơn một bộ chọn đơn giản hoặc cơ bản. Vì vậy, ở giữa
những bộ chọn cơ bản hoặc đơn giản này, bạn có thể kết hợp hoặc sử dụng
một tổ hợp.

Có bốn tổ hợp đặc biệt
do CSS cung cấp:

  • Bộ chọn anh chị em chung (~)
  • Bộ chọn phụ (khoảng trắng)
  • Bộ chọn con (& gt;)
  • Bộ chọn anh chị em kế cận (+)

Hãy để chúng tôi thảo luận từng cái một và xem cách triển khai
họ:

Bộ chọn anh chị em chung

Nó được triển khai để chọn phần tử theo sau
phần tử bộ chọn ban đầu hoặc đầu tiên và chia sẻ cùng một phần tử gốc với
phần tử bộ chọn đầu tiên. Bộ chọn anh chị em chung là rõ ràng
được triển khai để chọn một nhóm các phần tử được phân bổ cho cùng một
phần tử mẹ.

Dưới đây là một ví dụ mẫu về cách nó có thể được triển khai:

Ví dụ:

  & lt;! DOCTYPE html & gt;
& lt; html & gt;

& lt; đầu & gt;
    & lt; phong cách & gt;
        div ~ p {
            background-color: whitesmoke;
        }
    & lt; / style & gt;
& lt; / head & gt;

& lt; body & gt;

    & lt; p & gt; Một số văn bản ở đây. & lt; / p & gt;
    & lt; div & gt;
        & lt; p & gt; Một số văn bản ở đây. & lt; / p & gt;
    & lt; / div & gt;
    & lt; p & gt; Một số văn bản ở đây. & lt; / p & gt;
    & lt; p & gt; Một số văn bản ở đây. & lt; / p & gt;

& lt; / body & gt;
& lt; / html & gt;  

Bộ chọn con cháu

Bộ chọn này được triển khai để chọn mọi phần tử con
trong thẻ cụ thể được đề cập trong phần CSS selector.
Các thẻ có thể là con trực tiếp của bất kỳ thẻ cụ thể nào hoặc
cực kỳ sâu trong thẻ cụ thể. Đây là một đoạn mã
hiển thị bên dưới cách bộ chọn con thêm & lt; p & gt; yếu tố đó
nằm trong & lt; div & gt; phần tử.

Xem Thêm  Độ dài chuỗi JavaScript (với các ví dụ) - chiều dài javascript của chuỗi

Ví dụ:

  & lt;! DOCTYPE html & gt;
& lt; html & gt;

& lt; đầu & gt;
    & lt; phong cách & gt;
        div p {
            background-color: whitesmoke;
        }
    & lt; / style & gt;
& lt; / head & gt;

& lt; body & gt;

    & lt; div & gt;
        & lt; p & gt; Đoạn này nằm trong div. & lt; / p & gt;
        & lt; p & gt; Đoạn này nằm trong div. & lt; / p & gt;
        & lt; phần & gt;
            & lt; p & gt; Đoạn này nằm trong phần và phần nằm trong div. & lt; / p & gt;
        & lt; / phần & gt;
    & lt; / div & gt;
    & lt; p & gt; Đoạn này không nằm trong div. & lt; / p & gt;

& lt; / body & gt;
& lt; / html & gt;  

Bộ chọn con

Nó được triển khai để chọn phần tử cụ thể đó
nằm trong phần tử con của thẻ cụ thể đó. Nó còn hơn thế nữa
chính xác hoặc chính xác hơn bộ chọn con vì nó chỉ chọn
bộ chọn thứ hai nếu nó có phần tử bộ chọn đầu tiên là
cha mẹ.

Ví dụ:

 & lt;! DOCTYPE html & gt;
& lt; html & gt;

& lt; đầu & gt;
    & lt; phong cách & gt;
        div & gt; P {
            background-color: whitesmoke;
        }
    & lt; / style & gt;
& lt; / head & gt;

& lt; body & gt;

    & lt; div & gt;
        & lt; p & gt; Đoạn này nằm trong div. & lt; / p & gt;
        & lt; p & gt; Đoạn này nằm trong div. & lt; / p & gt;
        & lt; phần & gt;
            & lt; p & gt; Đoạn này nằm trong phần và phần nằm trong div. & lt; / p & gt;
        & lt; / phần & gt;
    & lt; / div & gt;
    & lt; p & gt; Đoạn này không nằm trong div. & lt; / p & gt;

& lt; / body & gt;
& lt; / html & gt;  

Bộ chọn anh chị em liền kề

Bộ chọn này được triển khai để chọn tất cả các phần tử đó,
là anh chị em kế cận hoặc lân cận của một cụ thể
yếu tố. Ở đây, các phần tử anh em phải có
phần tử mẹ cũng như “liền kề,” tức là “ngay lập tức
đang theo dõi “.

Xem Thêm  Nối nhiều cột trong SQL Server - cách nối hai cột trong sql

< / p>

Dưới đây là một ví dụ về cách triển khai anh chị em kế cận này
bộ chọn:

Ví dụ:

  & lt;! DOCTYPE html & gt;
& lt; html & gt;

& lt; đầu & gt;
    & lt; phong cách & gt;
        div + p {
            background-color: whitesmoke;
        }
    & lt; / style & gt;
& lt; / head & gt;

& lt; body & gt;

    & lt; p & gt; Đoạn này không nằm trong div. & lt; / p & gt;
    & lt; div & gt;
        & lt; p & gt; Đoạn này nằm trong div. & lt; / p & gt;
        & lt; p & gt; Đoạn này nằm trong div. & lt; / p & gt;
    & lt; / div & gt;
    & lt; p & gt; Đoạn này không nằm trong div. & lt; / p & gt;

& lt; / body & gt;
& lt; / html & gt;  

Ezoic

báo cáo quảng cáo này


Xem thêm những thông tin liên quan đến chủ đề bộ chọn css hậu duệ của lớp

2 Ngày 1 Đêm Việt Nam | Tập 1: Trường Giang chơi chiêu, Kiều Minh Tuấn rớt hết “sĩ diện” vì miếng ăn

alt

  • Tác giả: ĐÔNG TÂY PROMOTION OFFICIAL
  • Ngày đăng: 2022-06-19
  • Đánh giá: 4 ⭐ ( 6210 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: 2 Ngày 1 Đêm Việt Nam | Tập 1 FULL: Trường Giang chơi chiêu, Kiều Minh Tuấn rớt hết “sĩ diện” vì miếng ăn
    Tập đầu tiên của 2Ngay1DemVietNam đã chính thức lên sóng. Điểm đến cho chuyến đi đầu tiên Tự Do Tự Lo 2Ngay1Dem chính là Hà Tiên – một thành phố ven biển được ví như “thiên đường nơi hạ giới” thuộc tỉnh Kiên Giang. Cùng xem màn “chạm trán” đầu tiên của các thành viên trong biệt đội 2N1Đ sẽ lầy lội thế nào nhé!

    ⛺ 2 Ngày 1 Đêm là một chương trình truyền hình thực tế, nơi các nghệ sĩ có những chuyến đi đến nhiều vùng miền khác nhau khắp cả nước. Các thành viên phải hoàn thành nhiều nhiệm vụ và thử thách khác nhau để nhận những phần thưởng hay hình phạt thú vị.

    ▶️Xem sớm nhất và trọn bộ trên VieON 👉 https://vieon.vn/2-ngay-1-dem-tu-do-tu-lo.html
    📺 Đón xem 2 NGÀY 1 ĐÊM vào lúc 20H30 Chủ Nhật hàng tuần trên HTV7 và phát lại trên kênh @ĐÔNG TÂY PROMOTION OFFICIAL

    2ngay1dem 2Ngày1Đêm 2Days1NightVietNam 2N1Đ TựDoTựLo DongTayPromotion
    TrườngGiang KiềuMinhTuấn LêDươngBảoLâm NgôKiếnHuy CrisPhan HIEUTHUHAI

    📣 Subscribe kênh ĐÔNG TÂY PROMOTION OFFICIAL để không bỏ lỡ các chương trình SIÊU HẤP DẪN: https://bit.ly/SubDTP
    📣 Subscribe kênh DONG TAY ENTERTAINMENT để xem các VIDEO HOT từ các show đỉnh nhất: https://bit.ly/SubDTE

    ⏩ Bí mật HẬU TRƯỜNG https://bit.ly/HAUTRUONGDTP
    ⏩ SHOW HAY mỗi ngày https://bit.ly/showhotDTP

    👉 CÁC SHOW HOT KHÁC:
    2 Ngày 1 Đêm Việt Nam: https://bit.ly/2Ngay1DemVN
    Ơn Giời Cậu Đây Rồi: https://bit.ly/OnGioiCauDayRoiMua8
    Thời Tới Rồi: https://bit.ly/ThoiToiRoi
    Chọn Ai Đây: https://bit.ly/ChonAiDayMua3
    Drama Series Tâm Lof – Lỡ Va Vào Nhau: https://bit.ly/TamLof-LoVaVaoNhau
    Chuẩn Cơm Mẹ Nấu: https://bit.ly/ChuanComMeNau2022

    👉 Theo dõi các kênh chính thức của Dong Tay Promotion – thuộc sở hữu của DatVietVAC tại:
    ► Fanpage: https://www.facebook.com/DongTayPromotion
    ► Instagram: https://www.instagram.com/dongtaypromotion.official/
    ► TikTok: https://www.tiktok.com/@dongtaypromotionofficial

Bộ chọn CSS (CSS Selector)

  • Tác giả: viettuts.vn
  • Đánh giá: 3 ⭐ ( 2064 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bộ chọn CSS (CSS Selector) được sử dụng để chọn nội dung bạn muốn tạo kiểu. Bộ chọn CSS chọn các phần tử HTML theo id, class, type, thuộc tính…

LàM THẾ NàO ĐỂ: Tìm hiểu Bộ chọn hậu duệ CSS là gì – 2022

  • Tác giả: vie.go-travels.com
  • Đánh giá: 4 ⭐ ( 2109 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bộ chọn con cháu của CSS đặt tên cho thẻ HTML mà bạn muốn áp dụng kiểu. Điều này rất quan trọng để hiểu khi bạn xây dựng các thiết kế phức tạp hơn.

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

  • Tác giả: www.greelane.com
  • Đánh giá: 4 ⭐ ( 4960 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.

[CSS] Bài 2 – Các Bộ Chọn & Mức Ưu Tiên

  • Tác giả: viblo.asia
  • Đánh giá: 5 ⭐ ( 6184 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài viết này, chúng ta sẽ cùng nói về các bộ chọn selector trong CSS và mức độ ưu tiên của các bộ chọn khi có nhiều giá trị được áp dụng cho một luật CSS.

9 Bộ chọn CSS phổ biến

  • Tác giả: laptrinhvienphp.com
  • Đánh giá: 4 ⭐ ( 1348 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài học bộ chọn CSS này, bạn sẽ tìm hiểu cách sử dụng 9 bộ chọn CSS phổ biến (CSS Selector) để áp dụng thuộc tính CSS cho các phần tử.

Bộ chọn trong CSS3

  • Tác giả: comdy.vn
  • Đánh giá: 4 ⭐ ( 2109 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong hướng dẫn này, bạn sẽ học cách sử dụng các bộ chọn CSS3 để áp dụng các quy tắc CSS cho các phần tử HTML.

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

Xem Thêm  Làm cách nào để chuyển đổi chuỗi JSON thành mảng các đối tượng JSON bằng JavaScript? - mảng json đến json

By ads_php