CSS cơ bản: Cách sử dụng lớp trong lớp khác – css tất cả các div bên trong lớp

Bạn muốn áp dụng kiểu CSS cho một lớp trong một lớp khác? Trong hướng dẫn này, tôi sẽ chỉ cho bạn mọi thứ bạn cần biết để lồng các lớp CSS.

Bạn đang xem : css tất cả các div bên trong lớp

Bạn muốn áp dụng kiểu CSS cho một lớp trong một lớp khác? Trong hướng dẫn này, tôi sẽ chỉ cho bạn mọi thứ bạn cần biết để sử dụng các lớp CSS.

Để lồng các lớp hoặc bất kỳ bộ chọn nào khác trong CSS, chỉ cần tách phân cấp bộ chọn bằng dấu cách. Ví dụ: .parent .child {/ * Thuộc tính CSS * /}

Giả sử bạn có mã sau và chỉ muốn áp dụng kiểu cho & lt; h1 class = "post-title" & gt; nằm trong & lt; article class = "blog-post" & gt; .

  & lt; article class = "blog-post" & gt;
& lt; h1 class = "post-title" & gt; Tiêu đề blog & lt; / h1 & gt;
& lt; p & gt; Nội dung bài viết & lt; / p & gt;
& lt; / bài báo & gt;
 

Tệp CSS của bạn sẽ giống như sau:

 . blog-post .post-title {
/ * Thuộc tính CSS * /
màu sắc: xám;
}
 

Tất cả h1 có lớp “post-title” nằm trong lớp “blog-post” đều nhận được thuộc tính CSS. Ngay cả khi chúng được lồng vào bên trong các thẻ khác. Mặc dù mọi thứ bên ngoài “blog-post”, quy tắc sẽ không áp dụng.

Đối với mục đích minh họa, nếu chúng tôi muốn áp dụng cùng một hiệu ứng cho tất cả h1, không phụ thuộc vào lớp:

 < code class = "language-css">. blog-post h1 {
/ * Thuộc tính CSS * /
màu sắc: xám;
}
 

Bạn có thể sử dụng bất kỳ bộ chọn CSS nào khi lồng vào nhau với khoảng trắng, bạn có thể sử dụng bộ chọn id với # id-name, các bộ chọn thẻ như h1, pseudo-class, v.v.

Xem Thêm  Phương thức jQuery change () - sự kiện thay đổi giá trị đầu vào jquery

Chỉ chọn con trực tiếp

Nếu bạn có mã bên dưới và chỉ muốn áp dụng màu xám trên các liên kết là con trực tiếp của chân trang chứ không phải liên kết trong bản quyền div:

  & lt; footer & gt;
& lt; a href = "index" & gt; Trang chủ & lt; / a & gt;
& lt; a href = "blog" & gt; Blog & lt; / a & gt;

& lt; div class = "copyright" & gt;
& lt; a href = "#" & gt; website.com & lt; / a & gt;
& lt; / div & gt;
& lt; / footer & gt;
 
  footer & gt; một {
màu sắc: xám;
}
 

Chỉ chọn phần tử con đầu tiên

Hãy lấy cùng một ví dụ ở trên, nhưng bây giờ sự khác biệt là bạn chỉ muốn áp dụng hệ thống phân cấp cho liên kết đầu tiên.

  & lt; footer & gt;
& lt; a href = "index" & gt; Trang chủ & lt; / a & gt;
& lt; a href = "blog" & gt; Blog & lt; / a & gt;

& lt; div class = "copyright" & gt;
& lt; a href = "#" & gt; website.com & lt; / a & gt;
& lt; / div & gt;
& lt; / footer & gt;
 

Đoạn mã dưới đây sẽ áp dụng màu xám cho cả phần con đầu tiên của footer và phần con đầu tiên của .copyright.

  footer a: first-child {
màu sắc: xám;
}
 

Để chỉ áp dụng cho phần con đầu tiên của footer:

  footer & gt; a: con đầu lòng {
màu sắc: xám;
}
 < thí dụ. Mã cũng vậy, chúng ta chỉ cần thay đổi bộ chọn. 

  & lt; ul class = "menu" & gt;
& lt; li & gt; Mục 1 & lt; / li & gt;
& lt; li & gt; Mục 2 & lt; / li & gt;
& lt; li & gt; Mục 3 & lt; / li & gt;
& lt; / ul & gt;
 
  ul.menu li {
border-bottom: 1px màu xám đặc;
}

ul.menu li: con cuối cùng {
viền-dưới: 0;
}
 


Xem thêm những thông tin liên quan đến chủ đề css tất cả các div bên trong lớp

16-Css Dersleri-Css Div Uygulaması

  • Tác giả: Sadık Turan
  • Ngày đăng: 2022-01-05
  • Đánh giá: 4 ⭐ ( 5664 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Css ile web tasarım dersleri serimizin bu bölümünde div css uygulaması yapıyoruz.

    Kaynak kod: https://github.com/sadikturan/komple-web-gelistirme-dersleri/tree/master/src

    Kanalıma abone olmak için tıklayınız.
    https://www.youtube.com/user/sadikturan41?sub_confirmation=1

    Discord grubu: https://discord.gg/rANTmRzuHZ
    Telegram grubu: https://t.me/sadikturancom

    Tüm güncel kurslarım için https://sadikturan.com sayfamı ziyaret ederek indirim kuponlarından faydalanabilirsiniz.

    Komple Uygulamalı Web Geliştirme Eğitimi
    https://www.udemy.com/course/komple-web-developer-kursu/?referralCode=5D4498D410A2750305C1

    Python ile Sıfırdan İleri Seviye Python Programlama
    https://www.udemy.com/course/python-dersleri/?referralCode=666A69FA11897970EE46

    Python Django ile Sıfırdan İleri Seviye Web Geliştirme
    https://www.udemy.com/course/python-django-dersleri/?referralCode=55F7C66D793B9748D5D4

    Sıfırdan İleri Seviye Modern Javascript Dersleri ES7+
    https://www.udemy.com/course/modern-javascript-kursu/?referralCode=039B2533A42D1A45FD32

    Php ile Sıfırdan İleri Seviye Web Programlama Kursu
    https://www.udemy.com/course/php-dersleri/?referralCode=FA3ABEEB093FB4BD7ABD

    Asp.Net Core Mvc ile Sıfırdan İleri Seviye Web Programlama
    https://www.udemy.com/course/asp-net-core-dersleri/?referralCode=9A3BA8DB9E7115320DE2

    Sıfırdan Uygulamalı React Geliştirme Kursu: Redux & Hooks
    https://www.udemy.com/course/react-dersleri/?referralCode=BA852C35D95DCF3D243E

    Angular 12 ile Sıfırdan İleri Seviye Web Geliştirme
    https://www.udemy.com/course/angular-dersleri/?referralCode=296CF5D100064B0E29FC

    .Net Core Web Api & Angular ile Proje Geliştirme Kursu
    https://www.udemy.com/course/aspnet-core-web-api-angular-dersleri/?referralCode=8573269EFC5B46285B43

    Bootstrap 5 ile Premium Web Tasarım Proje Geliştirme Kursu
    https://www.udemy.com/course/bootstrap-dersleri/?referralCode=CEC007E59A2186379453

    Sıfırdan Uygulamalı SQL Veri Tabanı Dersleri: MySQL & MsSQL
    https://www.udemy.com/course/sql-dersleri/?referralCode=C636096751D8BF035F90

    E-Ticaret Kursu: Katmanlı Mimari ile Asp.net Mvc Dersleri
    https://www.udemy.com/course/aspnet-core-mvc-kursu/?referralCode=DCACE3376E0811F5BDA9

    C Programlama Eğitimi : En Baştan Adım Adım Öğren: https://www.udemy.com/course/komple-uygulamali-programlama-egitimi-yeni-baslayanlar/?referralCode=1D40058027DF00FE70BF

    Mobil Uygulama Kursu: Xamarin ile Android ve IOS Geliştirme
    https://www.udemy.com/course/xamarin-dersleri/?referralCode=11244D43D35056F44EDC

17 MẪU HIỆU ỨNG CSS HÀNG ĐẦU HIỆN NAY

  • Tác giả: aptech-danang.edu.vn
  • Đánh giá: 3 ⭐ ( 1944 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bạn đã có thể nhận thấy số lượng các ví dụ hiệu ứng CSS có trên các trang web đã tăng lên gần đây. Hiệu ứng đã tạo ra một giật gân trực tuyến và được thiết lập để trở thành một trong những xu hướng thiết kế web quan trọng của năm 2018 . Tất cả trên web, các nhà thiết kế đang sáng tạo và sử dụng hoạt ảnh CSS để mang cá tính đến trang web của họ, giải thích các ý tưởng phức tạp một cách nhanh chóng và dễ dàng và hướng dẫn hành động của người dùng.

Cú pháp và Selector trong CSS

  • Tác giả: quantrimang.com
  • Đánh giá: 3 ⭐ ( 3047 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bộ quy tắc của CSS gồm có công cụ chọn (selector) và khối khai báo (declaration).

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

  • Tác giả: code.tutsplus.com
  • Đánh giá: 5 ⭐ ( 4179 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...

Tổng hợp các thuộc tính của CSS

  • Tác giả: timoday.edu.vn
  • Đánh giá: 3 ⭐ ( 1806 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tổng hợp và phân loại tất cả các thuộc tính của CSS theo các nhóm Color, Background và Borders, Box, Text, Fonts, Table, Animation, Transform, Transition, v.v.

Cú pháp CSS

  • Tác giả: vietjack.com
  • Đánh giá: 4 ⭐ ( 3981 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cú pháp CSS | Selector trong CSS - Học CSS cơ bản và nâng cao theo từng bước bắt đầu từ CSS là gì, Thuộc tính trong CSS, Cú pháp CSS, Căn lề trong CSS, Border trong CSS, Căn chỉnh vị trí trong CSS, Định dạng Text trong CSS, Pseudo Class, Pseudo Element, Phần tử giả trong CSS, Hiệu ứng trong CSS, Đơn vị trong CSS, Color trong CSS, Chia cột trong CSS, Qui tắc trong CSS.

Thẻ DIV và CSS – CUONG TIEN

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

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