30/09/2018, 23:52

Hỏi sự khác nhau giữa các selectors trong CSS

Mọi người giúp em phân biệt sự khác nhau giữa 2 selectors sau:

1. tag01 tag02
2. tag01>tag02

E nghĩ nó đều chọn tất cả các tag02 nằm bên trong tag01, nhưng e chưa tìm được sự khác nhau giữa chúng, từng cái được dùng trong trường hợp

Người bị bơ viết 02:07 ngày 01/10/2018

Đối với trường hợp 1 thì chọn tất cã các tag02 lồng trong tag01, còn với trường hợp 2 thì tag02 phải là trực tiếp là con của tag01.

Trang Tuân viết 02:07 ngày 01/10/2018

HTML:

<ul class="tag01">
      <li class="tag03"></li>
      <li class="tag02"></li>/*--tag01>tag02--*/
      <li class="tag02"></li>
      <li class="tag02"></li>
</ul>

tag01 tag02: tất cả style của tag02 sẽ được áp dụng vào tất cả các thẻ li
tag01>tag02: áp dụng style của tag02 vào thẻ li bắt gặp đầu tiên trong list child.

Vậy cái 2 nó khác :first-child ở chỗ nào, đó là :first-child chỉ áp dụng được với list element cùng tag nên phải dùng cái này. Hay bắt gặp nhất trong :hover để quy định style duy nhất cho element được hover vào trong một list element giống nhau, nếu không sẽ bị áp dụng cho tất cả các style con của nó. Ví dụ menu lồng nhau mà không có duy định class cụ thể:

<ul>
  <li>
     <ul>
           <li></li>
           <li></li>
    </ul>
  </li>
  <li></li>
  <li></li>
</ul>

Khi viết ul>li:hover sẽ hiểu là chỉ áp dụng style cho li khi hover vào li con của ul đầu tiên, chứ không áp dụng vào li con của ul lồng trong nó.

Bình luận về bài viết này

Chia sẻ tin đăng đến bạn bè

Gửi Messenger

Bài liên quan

Hoàng Anh

0 chủ đề

0 bài viết

Tác giả nổi bật

Từ khóa nổi bật

AngularJS Blog Bootstrap C / C++ Cấu trúc dữ liệu & Giải thuật Cơ sở dữ liệu Codeigniter Công cụ lập trình CSS CSS cơ bản CSS3 Học Excel HTML HTML cơ bản HTML5 Java Javascript jQuery Json Lập trình mobile Laravel Linux MongoDB MySQL NodeJS Oracle Pascal PHP PHP cơ bản PHP nâng cao Python React Native ReactJS Ruby SEO SQL Server Swift Visual Basic VueJS WordPress XML

Chủ đề nổi bật

Hỏi sự khác nhau giữa các selectors trong CSS

Đăng ký nhận thông báo

HỖ TRỢ HỌC VIÊN

VỀ CODE24H

HỢP TÁC VÀ LIÊN KẾT

KẾT NỐI VỚI CHÚNG TÔI

TẢI ỨNG DỤNG TRÊN ĐIỆN THOẠI