Yêu cầu thg 1 7, 2021 2:34 CH 159 0 3
  • 159 0 3
0

Responsive CSS

Chia sẻ
  • 159 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 CÂU TRẢ LỜI


Đã trả lời thg 1 8, 2021 1:29 SA
Đã được chấp nhận
+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é 😀.

Chia sẻ
thg 1 8, 2021 4:28 SA

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

Avatar Khang @khangnd
thg 1 8, 2021 4:33 SA

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

Avatar Quiet @simple1805
thg 1 8, 2021 6:07 SA

@hao3004

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

Avatar Hao Le @hao3004
thg 1 8, 2021 8:52 SA

❤️

Đã trả lời thg 1 8, 2021 12:12 SA
+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

Chia sẻ
Đã trả lời thg 1 8, 2021 12:00 SA
0

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

display: block !important;
Chia sẻ
Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí