Yêu cầu thg 9 25, 2019 5:35 CH 1748 1 4
  • 1748 1 4
+3

Hỏi về GHI ĐÈ CLASS trong CSS

Chia sẻ
  • 1748 1 4

Định nghĩa lại tí: việc ghi đè nhằm kế thừa class cũ, đỡ phải viết lại css cho các thành phần na ná nhau. Tuy nhiên mình gặp 1 TH mà không biết ghi đè kiểu gì, đó là:

  • Class cũ nó position: absolute và left:0
  • Class mới (kế thừa nó): mình muốn right:0 mà nó không qua vì nó dính left:0
  • Mình bèn chỉnh ăn gian, cho left: 95%. Tuy nhiên việc này không phù hợp khi responsive.

Có giải pháp nào bỏ cái left:0 của class cũ ko ạ?

Xin cảm ơn anh chị.*

Avatar Vũ Nguyễn @vunguyen10111995
thg 9 25, 2019 11:18 CH
left: unset

xem được không bạn :v

Avatar Dũng @quocdungabc
thg 9 26, 2019 12:38 CH

@vunguyen10111995 : hic, đúng nó rồi pác, đã chạy ngon!

Avatar Vũ Nguyễn @vunguyen10111995
thg 9 26, 2019 2:12 CH

vậy là tốt rồi. có gì bạn cứ lên viblo đặt câu hỏi. mọi người sẽ giúp đỡ bạn 😄

Avatar Dũng @quocdungabc
thg 9 26, 2019 3:07 CH

@vunguyen10111995 🙃 ok pác, thank you. 🙃

4 CÂU TRẢ LỜI


Đã trả lời thg 9 25, 2019 11:35 CH
Đã được chấp nhận
+6

Bạn để là

left: unset;
right: 0 !important;

Xem đc không

Chia sẻ
Avatar Dũng @quocdungabc
thg 9 26, 2019 12:39 CH

Được rồi pác. Em nó đã nằm đúng vị trí, responsive ngon lành. Các pác thật vi diệu!!

2019-09-26 19_37_09-Bootstrap 4.png

thg 9 26, 2019 12:59 CH

@quocdungabc không có gì nha bạn 🤝

Đã trả lời thg 9 26, 2019 1:13 SA
+4

Khi bạn muốn ghi đè style cho một class đã có, bạn cần chú ý về các mức độ ưu tiên sử dụng CSS. Một số lưu ý cơ bản:

  • Chú ý viết style mới phải được thêm vào phía dưới style đã có. Bao gồm:
    • <link stylesheet> mới ở đặt dưới <link stylesheet> cũ nếu bạn tách các file css.
    • Nếu style mới, cũ cùng một file css, thì các style mới phải viết ở dưới phần style cũ. Nếu ko thì nó vẫn nhận style cũ. TH này muốn nhận style mới thì phải thêm !important - nên hạn chế dùng cái !important này thì hơn.
    • Nếu dùng sass, css mới và cũ nằm khác file, thì file chứ style mới cũng được được import sau khi đã import file cũ.
  • Ngoài ra, bạn cũng chú ý về kỹ năng debug CSS. Khi inspect element lên, bạn chú ý tab computed coi nó đang nhận CSS ở chỗ nào, từ đó dễ phát hiện lỗi hơn.

Cái lỗi này là lỗi cơ bản nên bạn cố gắng tư debug để nâng cao skill debug lên nhé. Còn nếu ko được thì bạn thử thêm như này coi sao:

.new-class {
  left: unset;
  right: 0 !important;
}
Chia sẻ
Avatar Dũng @quocdungabc
thg 9 26, 2019 12:40 CH

Cảm ơn pác nhiều nhé. Em sẽ tìm hiểu thêm về Debug trên Chrome, em con gà quá, cảm ơn pác đã chia sẻ tận tình!

thg 9 27, 2019 4:29 SA

😆

Đã trả lời thg 9 26, 2019 6:17 SA
+4

e thêm như này nhé:

left: auto;
right: 0;
Chia sẻ
Avatar Hoang Van Hung @hunghoangvan
thg 9 26, 2019 8:32 SA
Avatar Dũng @quocdungabc
thg 9 26, 2019 12:41 CH

ah left: auto vẫn chạy ngon, hoặc left: unset ạ Cái nào cũng ngon lành! Thanks pác!

Đã trả lời thg 10 7, 2019 3:13 SA
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í