วิธีการแก้ไข css โดยใช้คลาสที่คลุมอยู่เป็นตัวกำหนดที่จะต้องเปลี่ยน

[Patipat]

ในการเขียนเว็บไซต์ด้วยการใช้งาน css นั้นบางทีเราจะเจอปัญหาที่ว่า เราสามารถ Override ไฟล์ได้ Override ไฟล์คืออะไร ก็คือ เป็นการนำไฟล์ต้นฉบับมาแก้ไขนั่นเอง โดยที่เราไม่ต้องแก้ไขในไฟล์ต้นฉบับ สามารถศึกษาเพิมเติมเกี่ยวกับ การ Override ไฟล์ได้ที่ => วิธีการ Override ไฟล์ และในการ แก้ไข CSS นั้นจะมีบางจุดที่เราแก้ แล้วไฟล์ไปเรียกใช้งานอีกตัวนึง ทำให้การเปลี่ยนแปลงของ CSS นั้นไม่สามารถใช้งานได้ครับ เรามีวิธีนึงที่เราสามารถ เจาะจงให้เราสามารถใช้งาน css ได้โดยการกหนด class ที่คลุมไว้อยู่ เราไปดูตัวอย่างกันเลยครับ


เรามาดูรูปภาพที่เราจะเปลี่ยนกันเลยครับ ก็คือ ในรูป Input text จะมีขนาดกว้างมาก ทำให้การแสดงผลของเราไม่สวยงาม

Selection_999(496).png (16.19 KiB) Viewed 206 times

ส่วนนี้เป็น css ของ templateที่ยังไม่ได้ Override ชื่อคลาสที่ใช้ก็คือ input, textarea, นะครับ กำหนดให้มีขนาด 206 px

Code: Select all

input, textarea, .uneditable-input {
    width: 206px;
} 

เราจะมาเปลี่ยน css กันนะครับโดยที่เราไม่ต้องแก้ในไฟล์ ของต้นฉบับ
เราจะให้ดูกันชัด ๆนะครับว่า คลาสที่คลุ่มอยุ่คือ .jshop_prod_cart และ ตามด้วย input ที่เราจะแก้

Selection_999(497).png (31.65 KiB) Viewed 206 times

ให้เราแก้ไขไฟล์ใหม่โดยการ ใส่ชื่อคลาสที่คลุมอยู่ ตามด้วย input
ให้เราสร้าง ไฟล์ CSS แล้วก็อบคลาสไปใส่ครับ แล้วทำการเปลี่ยนชื่อคลาสเป็น .jshop_prod_cart input

Code: Select all

.jshop_prod_cart input {
  width: 45px;
}

วิธีนี้เป็นการเจาะจงว่าเราต้องการใช้คลาสไหน แล้วให้ใส่คลาสที่คลุมอยู่ก่อน แล้วตามด้วย type ที่ต้องการเปลี่ยน
ผลลัพธ์ก็จะได้ มีขนาดที่เรากำหนดไว้ครับ

Selection_999(498).png (26.67 KiB) Viewed 206 times

อาจจะเป็นแนวทางนึงในการเปลี่ยน ไฟล์ CSS นะครับ