Asked Jan 7th, 2:34 PM 104 0 3
  • 104 0 3
0

Responsive CSS

Share
  • 104 0 3

Cho em hỏi em muốn responsive cho content thanh left: 0% để căn giữa trang nhưng bị Override trang web không nhận thuộc tính em code. Có cách nào responsive đè lên thuộc tính cũ không ạ. Em cảm ơn !

3 ANSWERS


Answered Jan 8th, 1:29 AM
Accepted
+5

Để có kết quả mong muốn, bạn có thể:

  • Dùng !important nhưng không recommend cách này lắm vì nó có độ-ưu-tiên-cao-nhất, sau này muốn ghi đè rất khó hoặc tiếp tục phải lạm dụng !important.
  • Sử dụng selectorsCSS specificity (Độ ưu tiên) bằng-hoặc-cao-hơn selector cần ghi đè.

Về cách thứ 2:

Ban đầu content selector được bạn gọi từ các thẻ cha .hero-banner .slider .slide .content-holder .content (dòng 78) có độ ưu tiên là 0-0-5-0).

Xuống dòng 466 thì content selector được gọi là .content, có độ ưu tiên là 0-0-1-0 (thấp hơn 0-0-5-0).

⇒ Đó là lý do positionleft không thể override các giá trị mới như hình.

Để sửa lại, bạn có thể tiếp tục gọi .hero-banner .slider .slide .content-holder .content trong đoạn css responsive hoặc chỉ gọi .content ở CSS ban đầu thôi, chẳng hạn vậy.

Để hiểu rõ hơn về CSS-overriding, bạn có thể tìm hiểu thêm từ khóa: CSS SpecificityCascading CSS nhé 😀.

Share
Jan 8th, 4:28 AM

Cảm ơn vì kiến thức bạn chia sẻ !

+1
| Reply
Share
Khang @khangnd
Jan 8th, 4:33 AM

Rất hay, giúp mình biết rõ thêm về CSS specificity 👍

+1
| Reply
Share
Jan 8th, 6:07 AM

@hao3004

💯 điểm trình bày và chất lượng 🙏 (baiphuc)

+1
| Reply
Share
Hao Le @hao3004
Jan 8th, 8:52 AM

❤️

0
| Reply
Share
Answered Jan 8th, 12:12 AM
+1

Dùng !important như cách trên, hoặc dùng lại đúng các class cha chứa .content, ở đây là .hero-banner .slider .slide .content-holder .content

Share
Answered Jan 8th, 12:00 AM
0

Đằng sau từng thuộc tính bác thêm !important vào xem. Ví du:

display: block !important;
Share