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
