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

แชร์ ความรู้ในการ พัฒนา Joomla Component Extension Module Plugin

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
Patipat
PHP Super Hero Member
PHP Super Hero Member
โพสต์: 979
ลงทะเบียนเมื่อ: 10/06/2019 10:12 am

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

โพสต์โดย Patipat » 30/07/2019 6:59 pm

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


เรามาดูรูปภาพที่เราจะเปลี่ยนกันเลยครับ ก็คือ ในรูป Input text จะมีขนาดกว้างมาก ทำให้การแสดงผลของเราไม่สวยงาม
Selection_999(496).png
Selection_999(496).png (16.19 KiB) เปิดดู 71 ครั้ง


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

โค้ด: เลือกทั้งหมด

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


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


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

โค้ด: เลือกทั้งหมด

.jshop_prod_cart input {
  width: 45px;
}


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


อาจจะเป็นแนวทางนึงในการเปลี่ยน ไฟล์ CSS นะครับ
If you fall, let you stand. :)

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 2 และ บุคคลทั่วไป 0 ท่าน