Asked Sep 25th, 5:35 PM 146 1 4
  • 146 1 4
+3

Hỏi về GHI ĐÈ CLASS trong CSS

Share
  • 146 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ị.*

Vũ Nguyễn @vunguyen10111995
Sep 25th, 11:18 PM
left: unset

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

0
| Reply
Share
Dũng @quocdungabc
Sep 26th, 12:38 PM

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

+1
| Reply
Share
Vũ Nguyễn @vunguyen10111995
Sep 26th, 2:12 PM

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 😄

0
| Reply
Share
Dũng @quocdungabc
Sep 26th, 3:07 PM

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

0
| Reply
Share

4 ANSWERS


Answered Sep 25th, 11:35 PM
Accepted
+6

Bạn để là

left: unset;
right: 0 !important;

Xem đc không

Share
Dũng @quocdungabc
Sep 26th, 12:39 PM

Đượ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

+1
| Reply
Share
Sep 26th, 12:59 PM

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

0
| Reply
Share
Answered Sep 26th, 1:13 AM
+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;
}
Share
Dũng @quocdungabc
Sep 26th, 12:40 PM

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!

+1
| Reply
Share
Sep 27th, 4:29 AM

😆

0
| Reply
Share
Answered Sep 26th, 6:17 AM
+3

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

left: auto;
right: 0;
Share
Hoang Van Hung @hunghoangvan
Sep 26th, 8:32 AM
Dũng @quocdungabc
Sep 26th, 12:41 PM

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

0
| Reply
Share
Answered Oct 7th, 3:13 AM
Share