Cách nhắm mục tiêu một lớp CSS bên trong một lớp CSS khác

”. Sau đó, phân bổ một thuộc tính lớp để sử dụng thêm.

Bước 2: Tạo các vùng chứa “div” lồng nhau

Tiếp theo, tạo các thùng chứa div lồng nhau bằng cách thực hiện theo quy trình tương tự của bước 1:

< div lớp học = 'Nội dung chính' >

< div lớp học = 'bàn' >

< div lớp học = 'hàng ngang' >

< div lớp học = 'c-trái' > Kết hôn < / div >

< div lớp học = 'c-phải' > Jack < / div >

< div lớp học = 'c-trái' > tom < / div >

< div lớp học = 'c-phải' > Tháng bảy < / div >

< / div >

< / div >

< / div >

đầu ra

---

---

Bước 3: Áp dụng kiểu dáng trên Vùng chứa “div” chính

Truy cập chính “ div ” vùng chứa với sự trợ giúp của tên lớp là “ .Nội dung chính ”:

.Nội dung chính {

chiều rộng : 40% ;

lề : 0 tự động ;

màu sắc : màu xanh da trời ;

ranh giới : 2px say mê màu xanh da trời ;

căn chỉnh văn bản : trung tâm ;

}

Đây:

• “ chiều rộng ” chỉ định kích thước chiều rộng của phần tử.
• “ lề ” phân bổ không gian xung quanh phần tử bên ngoài đường viền đã xác định.
• “ màu sắc ” xác định màu cho văn bản được thêm vào phần tử.
• “ ranh giới ” xác định đường viền hoặc ranh giới xung quanh phần tử trong HTML.
• “ căn chỉnh văn bản ” xác định căn chỉnh văn bản của phần tử.

Bước 4: Tạo kiểu cho một lớp khác

Truy cập lớp chính CSS và các lớp lồng nhau khác bằng cách sử dụng tên của chúng. Sau đó, đặt chiều rộng của vùng chứa bằng cách chỉ định giá trị theo lựa chọn của bạn:

.Nội dung chính .bàn {

chiều rộng : 80% ;

}

Ngoài ra, hãy truy cập lớp khác bằng cách thực hiện theo quy trình tương tự như trên và áp dụng các thuộc tính CSS được đề cập trong đoạn mã bên dưới:

.Nội dung chính .c-phải {

trưng bày : chặn Nội tuyến ;

cỡ chữ : 20px ;

}

Theo đoạn mã trên:

• “ trưng bày ” Thuộc tính được sử dụng để thiết lập hiển thị của một phần tử.
• “ cỡ chữ ” chỉ định kích thước của văn bản được thêm vào vùng chứa.

Bây giờ, hãy truy cập các lớp khác bằng cách sử dụng cùng một phương thức và áp dụng các thuộc tính CSS sau như được đề cập bên dưới:

.Nội dung chính .c-trái {

chiều rộng : 140px ;

lề phải : 6px ;

cỡ chữ : 16px ;

}

Để làm như vậy, chúng tôi sẽ áp dụng “ chiều rộng ”, “ lề phải ' Và ' cỡ chữ ” cho mục đích tạo kiểu.

Hơn nữa, truy cập chính “ div ” vùng chứa dọc theo vùng chứa div lồng nhau khác bằng cách sử dụng tên lớp của chúng và áp dụng các thuộc tính CSS sau

.chủ yếu .c-phải {

chiều rộng : tự động ;

cỡ chữ : 15px ;

màu sắc : #fff ;

lề phải : 20px ;

trọng lượng phông chữ : Bình thường ;

}

đầu ra

Đó là tất cả về việc nhắm mục tiêu một lớp CSS bên trong một lớp CSS khác.

Phần kết luận

Để nhắm mục tiêu một lớp CSS trong một lớp CSS khác, trước tiên, hãy truy cập vào “ div ” thông qua thuộc tính lớp được gán. Sau đó, truy cập vào một vùng chứa “div” khác bằng cách làm theo quy trình tương tự. Hơn nữa, người dùng có thể nhắm mục tiêu một lớp CSS trong lớp CSS khác. Bài đăng này đã trình bày phương pháp nhắm mục tiêu một lớp CSS trong một lớp CSS khác.