Bộ chọn hậu duệ CSS – bộ chọn hậu duệ là gì

Hướng dẫn về CSS Descendant Selector. Ở đây chúng tôi thảo luận tổng quan ngắn gọn về CSS Descendant Selector và các ví dụ khác nhau của nó với mã.

Bạn đang xem : công cụ chọn hậu duệ là gì

Bộ chọn hậu duệ CSS

Định nghĩa Công cụ chọn hậu duệ của CSS

CSS Descendant Selector được định nghĩa để chọn tất cả các phần tử được cho là phần tử con và một trong các Bộ kết hợp CSS. Điều này được thực hiện để chọn từng phần tử con duy nhất được đề cập dưới các thẻ của phần bộ chọn CSS cũng như nó sử dụng cấu trúc hiện có của định dạng XHTML để tạo kiểu cho một tài liệu giúp kiểm soát tốt hơn trên trang web. Nói một cách dễ hiểu, bộ chọn này chỉ đơn giản là một danh sách các bộ chọn khác nhưng theo sau là phân cấp HTML. Descendant Selector bao gồm các yếu tố không phải là yếu tố trực tiếp như con, cháu, v.v.

Cú pháp:

Bắt đầu khóa học phát triển phần mềm miễn phí của bạn

Phát triển web, ngôn ngữ lập trình, Kiểm tra phần mềm & amp; những người khác

Ở đây chúng tôi có cú pháp đơn giản, nơi chúng tôi có thể viết một phần tử gốc và sau đó là phần tử được nhắm mục tiêu. Cú pháp chung được đưa ra là:

Phần tử phần tử
{
// Câu lệnh CSS;
}

Cú pháp trên có hai đối số, Phần tử đầu tiên cho biết phần tử đầu tiên phải khớp, phần tử thứ hai phải là con của phần tử đầu tiên. Và các câu lệnh nội dung tuân theo Kiểu CSS. Và việc thêm một khoảng trống nhỏ giữa hai bộ chọn, phần tử kiểu giống nhau cũng được phản ánh trong phần tử con.

Công cụ chọn con cháu hoạt động như thế nào trong CSS?

Chúng tôi đã thấy các công cụ chọn từ khóa; chúng được sử dụng để nhắm mục tiêu phần tử cụ thể có ID và lớp duy nhất. Thuật ngữ Con cháu nhắm mục tiêu đến các phần tử HTML là con đẻ sao cho các phần tử được nhắm mục tiêu dựa trên mối quan hệ của tài liệu HTML. CSS cung cấp một số tổ hợp đặc biệt như bộ chọn anh chị em, bộ chọn con và Bộ chọn con cháu. Và điều này cho phép tiết kiệm lớn mã hóa.

Ở đây chúng ta cùng tìm hiểu khái niệm đơn giản về bộ chọn Descendant và các bước hoạt động của nó. Hãy xem một tài liệu HTML đơn giản để giải thích Công cụ chọn hậu duệ.

& lt; html & gt;
& lt; đầu & gt; & lt; title & gt; xin chào & lt; / title & gt; & lt; / head & gt;
& lt; body & gt; & lt; h1 & gt; xin chào mọi người & lt; / h1 & gt;
& lt; p & gt; đây là văn bản & lt; / p & gt;
& lt; img src = ”gio.gif” & gt; & lt; / img & gt;
& lt; a & gt; … & Lt; / a & gt;
& lt; b & gt;…. & lt; / b & gt;
& lt; / html & gt;

Vì vậy, từ mã trên, & lt; body & gt; là thẻ mẹ của cả & lt; h1 & gt; và & lt; p & gt; yếu tố. Nói một cách dễ hiểu, tôi có thể nói rằng & lt; p & gt; , & lt; a & gt; , & lt; img & gt; , & lt; b & gt; các phần tử là con của phần tử body.

Xem Thêm  HTML Div - Thẻ Div là gì và Cách tạo kiểu bằng CSS - div đầu tiên trong css

Ví dụ mẫu: Có thể cần hai hoặc nhiều bộ chọn và mỗi bộ chọn được phân tách bằng khoảng trắng.

p em {color: red; }

Các câu lệnh trên kích hoạt trình duyệt chọn tất cả các phần tử em nằm dưới phần tử p theo quy tắc. Phần tử em không phải là con của phần tử p sẽ không được chọn.

Nếu giả sử chúng tôi cần sử dụng một phần tử HTML mạnh trong phần tử Heading thì chúng tôi sẽ làm gì?
h2 mạnh mẽ

Câu lệnh này hoàn toàn chọn một yếu tố mạnh trong tiêu đề của cấp 2 và gạch chân nó.

Thậm chí có thể làm tổ ở đây:

div p em {color: blue;}

Bộ chọn con cháu có thể được kết hợp với tính năng nhóm để đưa ra các mẫu tốt.

Ví dụ

Hãy để chúng tôi xem cách triển khai khác nhau trên các bộ chọn.

Ví dụ # 1

Mã:

& lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; đầu & gt;
& lt; meta charset = "utf-8" & gt;
& lt; title & gt; Ví dụ về bộ chọn con cháu & lt; / title & gt;
& lt; phong cách & gt;
.DataMining {
background-color: Red;
}
.Python {
background-color: màu hồng;
}
.BigData {
background-color: green;
màu: trắng;
}
& lt; / style & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; h1 & gt; & lt; center & gt; & lt; b & gt; DANH MỤC KHÓA HỌC & lt; / center & gt; & lt; / b & gt; & lt; / h1 & gt;
& lt; p & gt; Bạn có thể tìm hiểu Điều ước của mình với Lịch trình và Thời gian sống phù hợp Quyền truy cập nơi bạn có thể học hỏi từ các chuyên gia: & lt; / p & gt;
& lt; ul & gt;
& lt; li & gt;
& lt; strong class = "DataMining" & gt; DataMining & lt; / strong & gt;
& lt; / li & gt;
& lt; li & gt;
& lt; strong class = "BigData" & gt; BigData & lt; / strong & gt;
& lt; / li & gt;
& lt; li & gt;
& lt; strong class = "Python" & gt; Python & lt; / strong & gt;
& lt; / li & gt;
& lt; / ul & gt;
& lt; p & gt; Chà! Danh mục Hàng đầu bao gồm & lt; strong class = "green" & gt; lịch biểu & lt; / strong & gt; Cải thiện Phát triển Kinh doanh, Tiếp thị, thiết kế và trong lĩnh vực CNTT & lt; / p & gt;
& lt; / body & gt;
& lt; / html & gt;

Các đoạn mã trên cho biết cách bộ chọn con thêm thẻ đoạn & lt; p & gt; nằm dưới & lt; h1 & gt; thẻ.

Đầu ra :

Bộ chọn hậu duệ CSS 1

Ví dụ # 2

Mã:

& lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; đầu & gt;
& lt; phong cách & gt;
div p {
background-color: green;
font-size: 20px;
}
& lt; / style & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; div & gt;
& lt; p & gt; Chào mừng bạn đến với Mua sắm tại nhà & lt; / p & gt;
& lt; p & gt; Bạn có thể Mua sắm theo bộ phận & lt; / p & gt;
& lt; phần & gt;
& lt; p & gt; Bạn có thể liên hệ tại đây với www.homeshooping.com với các điều khoản và điều kiện & lt; / p & gt;
& lt; / section & gt;
& lt; / div & gt;
& lt; p & gt; Đã đến lúc mang lại cảm giác tốt & lt; / p & gt;
& lt; / body & gt;
& lt; / html & gt;

Từ đoạn mã trên, chúng tôi hiểu rằng & lt; p & gt; thẻ bị ảnh hưởng bên trong & lt; div & gt; phần tử thẻ. Sao cho & lt; p & gt; phần tử không được đánh dấu vì nó nằm ngoài & lt; div & gt; thẻ.

Xem Thêm  Làm thế nào để tạo một Div theo chiều dọc có thể cuộn - thanh cuộn trên div

Đầu ra:

CSS Descendant Selector 2

Ví dụ # 3

Mã:

& lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; đầu & gt;
& lt; phong cách & gt;
p b {
background-color: màu hồng;
màu: đỏ;
font-size: 20px;
}
& lt; / style & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; p & gt; Xin chào, & lt; b & gt; Thế giới CSS! & lt; / b & gt; - Giới thiệu về Bộ chọn CSS & lt; b & gt; CSS Hoạt động & lt; / b & gt; & lt; / p & gt;
liên kết, & lt; b & gt; CSS & lt; / b & gt; - Tới HTML & lt; b & gt; với các phần tử In đậm & lt; / b & gt; xin chào!.
& lt; / body & gt;
& lt; / html & gt;

Đoạn mã trên nói về phần tử in đậm. Nhân tiện trong ví dụ này, tôi đã làm cho tất cả các phần tử in đậm có màu đỏ nằm trong thẻ đoạn văn. Phần tử in đậm nằm ngoài thẻ đoạn văn được tô đậm nhưng kiểu màu không được phản ánh vì chúng không phải là bộ chọn Hậu duệ. Ví dụ tương tự cũng hữu ích để làm cho các liên kết menu chính thay đổi màu sắc.

Đầu ra:

CSS Descendant Selector 3

Ví dụ # 4

Hậu duệ không có Ví dụ trực tiếp về phần tử con- Ở đây phần tử con của phần tử con được phản ánh.

Mã:

& lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; đầu & gt;
& lt; style type = "text / css" & gt;
div.Selector b {
màu: đỏ;
màu nền: Powderblue;
font-family: courier;
}
& lt; / style & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; div class = "Bộ chọn" & gt;
& lt; b & gt; Danh sách 1 & lt; / b & gt;
& lt; div & gt;
& lt; b & gt; Danh sách 2 & lt; / b & gt;
& lt; div & gt;
& lt; b & gt; Danh sách 3 & lt; / b & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt; / body & gt;
& lt; / html & gt;

Đoạn mã trên cho biết rằng phần tử được nhắm mục tiêu ở đây là & lt; div & gt; phần tử với lớp theo sau là thẻ in đậm. Nhưng ở đây nó có nhiều lớp div với phần tử đậm, phong cách màu vẫn được phản ánh trên tất cả phần tử đậm. Nếu giả sử chúng ta muốn đứa trẻ trực tiếp phản ánh một bộ chọn con được sử dụng. Đây là kết quả trình diễn:

Đầu ra:

example # 4

Ví dụ # 5: Bộ chọn với các phần tử khác nhau.

Mã:

& lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; đầu & gt;
& lt; style type = "text / css" & gt;
div p
{
màu: tím;
font-size: 20px;
}
ul p {
background-color: vàng;
}
& lt; / style & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; div & gt; & lt; p & gt; Thư hoàn hảo & lt; / p & gt;
& lt; p & gt; Liệt kê địa chỉ & lt; / p & gt;
& lt; / div & gt;
& lt; ul & gt; & lt; p & gt; Id Yahoo & lt; / p & gt;
& lt; p & gt; id hotmail & lt; / p & gt;
& lt; p & gt; Id Gmail & lt; / p & gt;
& lt; / ul & gt;
& lt; / body & gt;
& lt; / html & gt;

Đây là hai bộ chọn khác nhau hoạt động song song với chung & lt; p & gt; phần tử.

Đầu ra:

example # 5

Kết luận

Để kết thúc, chúng ta đã xem cách sử dụng các bộ chọn con cháu CSS với cú pháp và cách triển khai của chúng. Điều này cung cấp cho chúng tôi một cách để đưa ra một bản trình bày siêu việt bằng cách thực hiện phân tách giúp mã rõ ràng và sạch sẽ với cấu trúc tốt. Mặc dù chúng ta đã thấy bộ chọn ban đầu trong các bài viết trước cho phép kiểm soát trang web. Do đó, bộ chọn Descendant này cung cấp khả năng kiểm soát tốt trên các phần tử HTML. Dù sao thì cũng tốt khi thấy các bộ chọn CSS cực kỳ mạnh mẽ để làm như vậy.

Xem Thêm  Làm thế nào để khai báo một mảng trong Python? - xác định một mảng trong python

Các bài báo được đề xuất

Đây là hướng dẫn về CSS Descendant Selector. Ở đây chúng ta thảo luận về Định nghĩa của CSS Descendant Selector và Descendant Selector hoạt động như thế nào trong CSS? với các ví dụ khác nhau cùng với việc triển khai mã của nó. Bạn cũng có thể xem qua các bài viết đề xuất khác của chúng tôi để tìm hiểu thêm –

0

Chia sẻ

Chia sẻ


Xem thêm những thông tin liên quan đến chủ đề bộ chọn hậu duệ là gì

Hậu Duệ Mặt Trời VN Tập 05 – Anh luôn ủng hộ mọi quyết định của em, bác sĩ Hoài Phương à

alt

  • Tác giả: FILM BOX
  • Ngày đăng: 2020-07-03
  • Đánh giá: 4 ⭐ ( 7383 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: ►Xem Trọn bộ Hậu Duệ Mặt Trời Việt Nam: https://danet.vn/series/1537760548/hau-due-mat-troi-viet-nam.html

    Diễn viên: Song Luân, Khả Ngân, Hữu Vi, Cao Thái Hà

    LIKE VÀ SUBSCRIBE ĐỂ CẬP NHẬT PHIM HAY MỖI NGÀY:
    Danet YouTube: https://bitly.com.vn/Sz4VB
    Danet Fanpage: http://fb.com/danetvietnam
    Danet Homepage: https://danet.vn/

    HậuDuệMặtTrời DescendantsOfTheSun DescendantsOfTheSunVietnam
    ————–
    © Bản quyền thuộc về BHD
    © Copyright by BHD
    Please do not re-upload.
    Thanks for watching.

“Hậu duệ mặt trời” đang “làm mưa làm gió” tại Châu Á như thế nào?

  • Tác giả: dantri.com.vn
  • Đánh giá: 4 ⭐ ( 7445 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: (Dân trí) – “Hậu duệ mặt trời” hiện được xem là “cơn mưa rào” cho ngành giải trí Hàn đang đứng trước nguy cơ “hạn hán”. Sự thành công của bộ phim không chỉ

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

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

Tìm hiểu hậu duệ là gì mới nhất

  • Tác giả: wiho.com.vn
  • Đánh giá: 4 ⭐ ( 4086 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

50 sắc thái của cư dân mạng Trung Quốc khi xem ‘Hậu duệ mặt trời’ phiên bản Việt Nam

  • Tác giả: vietgiaitri.com
  • Đánh giá: 5 ⭐ ( 5031 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Khán giả Trung tỏ ra bất ngờ và thích thú trước một phiên bản Hậu duệ mặt trời Việt Nam có phần mới lạ hơn so với bản gốc Hàn Quốc.

hậu duệ – Wiktionary tiếng Việt

  • Tác giả: vi.wiktionary.org
  • Đánh giá: 4 ⭐ ( 3992 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Hậu Duệ Là Gì, Nghĩa Của Từ Hậu Duệ, Hậu Duệ Nghĩa Là Gì

  • Tác giả: peaceworld.com.vn
  • Đánh giá: 4 ⭐ ( 4700 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hậu duệ là bất kỳ người nào có nguồn gốc từ người khác, chẳng hạn như cháu hoặc con, Khái niệm này gắn liền với khái niệm quan hệ họ hàng (mối quan hệ huyết thống hoặc liên minh nhờ vào luật pháp )

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