Quy tắc dấu > + ~ áp dụng trong thẻ css html div p a

Thảo luận trong 'Ngôn ngữ lập trình CSS, HTML' bắt đầu bởi admin, 23/9/16.

  1. admin

    admin Phạm Công Sơn Thành viên BQT

    Tham gia ngày:
    22/5/13
    Bài viết:
    3,746
    Đã được thích:
    716
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Khi học lập trình css bạn thường thắc mắc các dấu > + ~ áp dụng lung tung mà không biết lý do tại sao. Hôm nay mình hướng dẫn các bạn cách phân biệt sử dụng dễ dàng nhất các thuộc tính này như sau:
    • div p : Áp dụng cho tất cả các con nằm thẻ div là P
    • div > p : Áp dụng cho tất cả các con thứ 1 nằm thẻ div là P
    • div + p : Áp dụng cho duy nhất 1 thẻ p cùng cấp sau thẻ div.
    • div ~ p : Áp dụng cho tất cả các thẻ p cùng cấp sau thẻ div.
    VD nhỏ:
    • Ta có code CSS như sau, câu hỏi là: tầm ảnh hưởng của thẻ border này như thế nào?
    Mã:
    #left div p>img
    {
       border:2px solid red;
    }
    
    • Giải đáp câu hỏi trên, thẻ border áp dụng cho con của p chứa thẻ div và có id là left
    Mã:
    <div id="left">
          <div>
           <p>Hình ảnh mang tính chất minh họa
                  <img alt="Hình ảnh" src="images/lich-nghi-tet-nam-2016.png">
           </p>
      </div>
    </div>
    
     
    Cảm ơn đã xem bài:

    Quy tắc dấu > + ~ áp dụng trong thẻ css html div p a

    Đang tải...


Like và Share ủng hộ ITSEOVN