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, HTML5' bắt đầu bởi admin, 23/9/16.

  1. admin
    Tham gia ngày:
    22/5/13
    Bài viết:
    4,862
    Đã được thích:
    1,192
    Đ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;
    }
    .left ul > li:first-child
    {
       color: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
    • left ul>li:first-child: áp dụng cho thẻ li nằm trong thẻ ul vị trí áp dụng thẻ li đầu tiên.
    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>
    
    Ngoài ra còn có thêm
    Mã:
    .left ul > li:nth-child(vi_tri)
    {
       color:red;
    }
    .left ul > li:last-child
    {
       color:red;
    }
    
    • vi_tri: vị trí cần tác động
     
    Cảm ơn đã xem bài:

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

    Chỉnh sửa cuối: 24/6/23


Chủ để tương tự : tắc dấu
Diễn đàn Tiêu đề Date
Ngôn ngữ lập trình CSS, HTML, HTML5 Quy tắc dấu trong thẻ div > + ~ 8/1/16