ฉันค่อนข้างใหม่กับ CSS3 และฉันต้องการที่จะทำสิ่งต่อไปนี้:
เมื่อฉันเพิ่มคลาสเข้าไปในองค์ประกอบมันจะแทนที่คุณสมบัติของคลาสอื่นที่ใช้ในองค์ประกอบเฉพาะนี้
สมมุติว่ามี
<a class="left carousel-control" href="#carousel" data-slide="prev">
ฉันต้องการที่จะสามารถที่จะเพิ่มระดับที่เรียกว่ากว่าจะแทนที่พื้นหลังเริ่มต้นในชั้นเรียนbakground-noneleft
ขอบคุณ!
คำตอบ:
มีหลายวิธีที่สามารถแทนที่คุณสมบัติได้ สมมติว่าคุณมี
.left { background: blue }
เช่นสิ่งใด ๆ ต่อไปนี้จะแทนที่:
a.background-none { background: none; }
body .background-none { background: none; }
.background-none { background: none !important; }
"ชนะ" สองรายการแรกตามความจำเพาะของตัวเลือก คนที่สามชนะด้วย!importantเครื่องดนตรีทื่อ
คุณยังสามารถจัดระเบียบสไตล์ชีตของคุณเช่นกฎ
.background-none { background: none; }
ชนะตามคำสั่งกล่าวคืออยู่ตามกฎที่ "ทรงพลัง" อย่างเท่าเทียมกัน แต่นี่เป็นการกำหนดข้อ จำกัด และคุณต้องระมัดระวังในการจัดระเบียบสไตล์ชีตใหม่
นี่คือตัวอย่างทั้งหมดของCSS Cascadeซึ่งเป็นแนวคิดที่สำคัญ แต่เข้าใจผิดอย่างกว้างขวาง เป็นการกำหนดกฎที่แน่นอนสำหรับการแก้ไขความขัดแย้งระหว่างกฎสไตล์ชีต
ปล. ฉันใช้leftและbackground-noneตามที่ใช้ในคำถาม เป็นตัวอย่างของชื่อคลาสที่ไม่ควรใช้เนื่องจากแสดงถึงการแสดงผลที่เฉพาะเจาะจงและไม่ใช่บทบาทเชิงโครงสร้างหรือเชิงความหมาย
button, name-labelฯลฯ ) คนอื่นรู้สึก CSS ที่จะกลายเป็นไม่สามารถจัดการได้ถ้าคุณใช้วิธีการนี้และคุณควรใช้ "ยูทิลิตี้ครั้งแรก" หรือ "การทำงาน" CSS ที่เรียนที่สอดคล้องกับค่าทรัพย์สิน (เช่นmargin-top-4, width-10ฯลฯ ) ในอดีตแนวทาง "ความหมาย" มีความโดดเด่นในขณะที่เมื่อไม่นานมานี้แนวทาง "การทำงาน" ได้รับความสนใจจากผู้สมัคร ลองทั้งในโครงการขนาดกลางแล้วตัดสินใจด้วยตัวเองว่าดีกว่า
เพียงแค่ใช้!importantมันจะช่วยในการลบล้าง
background:none !important;
แม้ว่าจะกล่าวว่าเป็นการปฏิบัติที่ไม่ดี แต่!importantก็มีประโยชน์สำหรับคลาสยูทิลิตี้ แต่คุณต้องใช้อย่างมีความรับผิดชอบตรวจสอบสิ่งนี้: เมื่อใช้สิ่งสำคัญเป็นทางเลือกที่เหมาะสม
ในฐานะที่เป็นทางเลือกในการที่importantคำหลักที่คุณสามารถทำให้เฉพาะเจาะจงเลือกมากขึ้นตัวอย่างเช่น:
.left.background-none { background:none; }
(หมายเหตุ: ไม่มีช่องว่างระหว่างชื่อคลาส)
ในกรณีนี้กฎจะใช้เมื่อทั้งสองอย่าง.leftและ.background-noneแสดงอยู่ในแอตทริบิวต์คลาส (โดยไม่คำนึงถึงลำดับหรือความใกล้เคียง)
คุณควรลบล้างโดยการเพิ่มความจำเพาะของสไตล์ของคุณ มีหลายวิธีในการเพิ่มความจำเพาะ การใช้ความ!importantเฉพาะเจาะจงของเอฟเฟกต์ใดเป็นแนวทางปฏิบัติที่ไม่ดีเนื่องจากเป็นการแบ่งการเรียงซ้อนตามธรรมชาติในสไตล์ชีตของคุณ
แผนภาพต่อไปนี้นำมาจากcss-tricks.comจะช่วยให้คุณสร้างความเฉพาะเจาะจงที่เหมาะสมสำหรับองค์ประกอบของคุณตามโครงสร้างจุด ความจำเพาะใดที่มีคะแนนสูงกว่าจะเป็นผู้ชนะ ฟังดูเหมือนเกมไม่ใช่เหรอ?
กร้าตัวอย่างการคำนวณที่นี่ในcss-tricks.com วิธีนี้จะช่วยให้คุณเข้าใจแนวคิดเป็นอย่างดีและใช้เวลาเพียง 2 นาที
หากคุณต้องการผลิตและ / หรือเปรียบเทียบลักษณะเฉพาะต่างๆด้วยตัวเองลองใช้เครื่องคำนวณความจำเพาะนี้: https://specificity.keegan.st/หรือคุณสามารถใช้กระดาษ / ดินสอแบบเดิมก็ได้
สำหรับการอ่านต่อไปลองMDN เว็บเอกสาร
!importantทั้งหมดที่ดีที่สุดสำหรับการไม่ได้ใช้
ถ้าคุณแสดงรายการbakground-noneชั้นเรียนตามหลังคลาสอื่นคุณสมบัติของคลาสนั้นจะแทนที่คลาสที่ตั้งค่าไว้แล้ว ไม่จำเป็นต้องใช้!importantที่นี่
ตัวอย่างเช่น:
.red { background-color: red; }
.background-none { background: none; }
และ
<a class="red background-none" href="#carousel">...</a>
ลิงค์จะไม่มีพื้นหลังสีแดง โปรดทราบว่าสิ่งนี้จะแทนที่คุณสมบัติที่มีตัวเลือกที่เฉพาะเจาะจงน้อยกว่าหรือเท่ากันเท่านั้น
LIFO เป็นวิธีที่เบราว์เซอร์แยกวิเคราะห์คุณสมบัติ CSS หากคุณใช้ Sass ให้ประกาศตัวแปรที่เรียกว่าเป็น
"$ header-background: red;"
ใช้แทนการกำหนดค่าโดยตรงเช่นสีแดงหรือสีน้ำเงิน เมื่อคุณต้องการลบล้างให้กำหนดค่าใหม่ให้
"$ header-background: สีน้ำเงิน"
แล้ว
พื้นหลังสี: $ header-background;
มันควรจะลบล้างได้อย่างราบรื่น การใช้ "! important" ไม่ใช่ทางเลือกที่ถูกต้องเสมอไป .. เป็นเพียงโปรแกรมแก้ไขด่วน
leftและbackground-noneหลีกเลี่ยง?