วิธีการแทนที่! สำคัญ?

250

ฉันสร้างสไตล์ชีทที่กำหนดเองซึ่งแทนที่ CSS ดั้งเดิมสำหรับเทมเพลต Wordpress ของฉัน อย่างไรก็ตามในหน้าปฏิทินของฉัน CSS ดั้งเดิมมีความสูงของเซลล์ตารางแต่ละตารางที่มีการ!importantประกาศ:

td {height: 100px !important}

มีวิธีที่ฉันสามารถแทนที่สิ่งนี้หรือไม่?

css

— user1444027
แหล่งที่มา

3

คุณลองใช้!importantด้วยหรือไม่ หากแผ่นงาน CSS ของคุณกำหนดไว้หลังจากเทมเพลตดั้งเดิมแล้วแผ่นงานควรทำงานได้ดี

— Petr Janeček

1

แผ่นงานแผ่นใดเป็นแผ่นสุดท้ายคุณหรือแม่แบบ

— j08691

67

นี่คือเหตุผลที่!importantถือว่าเป็นอันตราย

— Spudley

8

วิธีที่ทรงพลังที่สุดเป็นเช่นนั้น: td [style] {height: 110px! important; } มันทำหน้าที่เสมือนว่าคุณฉีดสไตล์อินไลน์ไปยัง html เนื่องจากคุณใช้สไตล์กับแอตทริบิวต์สไตล์จริงของแท็ก

— DMTintner

352

การเอาชนะตัวปรับแต่งสำคัญ!

เพียงเพิ่มกฎ CSS อีกด้วย!importantและเพิ่มความจำเพาะให้กับตัวเลือก (เพิ่มแท็ก id หรือคลาสเพิ่มเติมให้กับตัวเลือก)
เพิ่มกฎ CSS ที่มีตัวเลือกเดียวกันในภายหลังกว่ากฎที่มีอยู่ (ในการผูกการชนะล่าสุดที่กำหนดไว้)

ตัวอย่างบางตัวอย่างที่มีความจำเพาะสูงกว่า (อันดับแรกคือสูงสุด / ลบล้างที่สามคือต่ำที่สุด):

table td    {height: 50px !important;}
.myTable td {height: 50px !important;}
#myTable td {height: 50px !important;}

หรือเพิ่มตัวเลือกเดียวกันหลังจากตัวเลือกที่มีอยู่:

td {height: 50px !important;}

Disclaimer:

!importantมันเกือบจะไม่เป็นความคิดที่ดีที่จะใช้ นี่คือวิศวกรรมที่ไม่ดีโดยผู้สร้างของแม่แบบ WordPress ในรูปแบบไวรัสมันบังคับให้ผู้ใช้แม่แบบเพิ่มตัว!importantปรับแต่งของพวกเขาเองเพื่อแทนที่มันและจะ จำกัด ตัวเลือกสำหรับการแทนที่มันผ่าน JavaScript

แต่มันมีประโยชน์ที่จะรู้วิธีการแทนที่ถ้าคุณจำเป็นต้องทำ

— แมตต์ Coughlin
แหล่งที่มา

7

ฉันรู้ว่านี่เป็นคำตอบที่เก่ากว่าเล็กน้อย แต่คุณสามารถเพิ่มความคิดเห็นได้ไหมว่านี่เป็นวิธีที่แย่มากในการเขียน CSS ของคุณ (หรือระบุว่าทำไมมันถึงยอมรับได้ถ้าคุณไม่เห็นด้วย) ฉันเคยเห็นผู้คนอ้างถึงคำตอบนี้ ... :)

— ZenMaster

คำตอบที่ดี ฉันเห็นด้วยมันเป็นระเบียบ มันบังคับให้ฉันแฮ็ครอบ ๆ การแฮ็กของพวกเขาจากนั้นก็มีคนที่แฮ็กรอบการแฮ็กของฉัน ฯลฯ ในกรณีของฉันฉันต้องจัดการกับแม่แบบที่ดึง CSS ของพวกเขาออกจากฐานข้อมูลที่ไหนสักแห่ง ฉัน grep การถ่ายโอนข้อมูล DB และมันแสดงให้ฉันเห็นว่ามันมาจาก 1MB json blob ไม่มีประโยชน์สำหรับฉันในการค้นหาตำแหน่งที่จะเปลี่ยนแปลงบังคับให้ฉันเพิ่ม CSS ลงในไฟล์โค้ดวิธีที่ควรทำยกเว้นกับแฮ็กที่น่ารังเกียจเหล่านี้

— Josh Ribakoff

ดูเพิ่มเติมที่: ความสัมพันธ์ระหว่าง! ความสำคัญและความเฉพาะเจาะจงของ CSS

— BoltClock

อาจเป็นความคิดที่ดีที่จะเพิ่มตัวระบุแท็กแม้ว่ามันจะทำให้ css ช้าลงก็ตาม เพิ่งต้องแก้ไขที่ฉันต้องใส่ div # header.class {style:; } เพื่อที่จะให้มัน ... น่ารำคาญมาก

— Sparatan117

!importantมีการใช้ที่ดีสำหรับการเป็น เช่นเดียวกับการแทนที่สไตล์เบราว์เซอร์หรือทั่วทั้งไซต์จากสคริปต์ Stylish, AdBlock หรือ uBlock หรือเมื่อคุณไม่สามารถเข้าถึง CSS พื้นฐานได้ง่ายซึ่งอาจซับซ้อนมากแพร่กระจายผ่านไฟล์จำนวนมากและเปลี่ยนแปลงตลอดเวลา (และอาจใช้!important) เช่นเดียวกับเครื่องมือใด ๆ ศักยภาพเชิงบวกหรือเชิงลบจะขึ้นอยู่กับวิธีการใช้งานของคุณ ผู้คนจำเป็นต้องหยุดลิงเมื่อใดก็ตามที่สิ่งนี้หรือข้ามไป / eval / globals / ฯลฯ มีการกล่าวถึง อาจจะพูดว่า "หลีกเลี่ยง WordPress" หรือ "หลีกเลี่ยง CSS" เพราะศักยภาพในการ

— Beejor

30

!importantควรใช้เฉพาะเมื่อคุณมีตัวเลือกในแผ่นสไตล์ของคุณกับความขัดแย้งที่เฉพาะเจาะจง

แต่แม้ว่าคุณจะมีข้อขัดแย้งที่เฉพาะเจาะจงคุณควรสร้างตัวเลือกที่เฉพาะเจาะจงมากขึ้นสำหรับข้อยกเว้น ในกรณีของคุณดีกว่าที่จะมีclassใน HTML ของคุณซึ่งคุณสามารถใช้เพื่อสร้างตัวเลือกที่เฉพาะเจาะจงมากขึ้นซึ่งไม่จำเป็นต้องมี!importantกฎ

td.a-semantic-class-name { height: 100px; }

ฉันเองไม่เคยใช้!importantสไตล์ชีทเลย จำไว้ว่า C ใน CSS นั้นใช้สำหรับการเรียงซ้อน การใช้!importantจะทำลายสิ่งนี้

— Jasper de Vries
แหล่งที่มา

17

นี่ไม่เป็นความจริง. !importantกฎในสไตล์จะแทนที่กฎปกติในstyleแท็กตัวอย่างเช่น อย่างไรก็ตามในบางสถานการณ์มันจะปรากฏว่ากฎที่เฉพาะเจาะจงมากขึ้นแทนที่มัน ตัวอย่างเช่นถ้าคุณตั้งค่าfont-size: 24pt !importantได้ที่bodyคุณยังสามารถแทนที่ด้วยบนfont-size: 12pt pนี้เป็นเพราะคุณไม่ได้เอาชนะ!importantกฎคุณจะเอาชนะโดยปริยายในfont-size: inherit p

— meustrus

23

คำเตือน: หลีกเลี่ยง! สำคัญที่ค่าใช้จ่ายทั้งหมด

นี่เป็นแฮ็คที่สกปรกและสกปรก แต่คุณสามารถแทนที่!! สำคัญโดยไม่ต้อง! สำคัญได้โดยใช้ภาพเคลื่อนไหว (วนซ้ำไม่สิ้นสุดหรือติดทนนานมาก) บนพื้นที่ที่คุณพยายามจะแทนที่ผู้นำเข้า

@keyframes forceYellow {
  from {
    background-color: yellow;
  }
  to {
    background-color: yellow;
  }
}

div {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  background: red !important;
  animation: 1s linear infinite forceYellow;
}

<div></div>

ขยายตัวอย่างข้อมูล

— mariomc
แหล่งที่มา

2

อาจทำให้ซีพียูของผู้ใช้เครียด

— Berry Tsakala

2

ดูเหมือนว่าเคล็ดลับนี้จะไม่ทำงานอีกต่อไป ใน Firefox 78 และ Chrome 83 กล่องยังคงเป็นสีแดง

— Andy Pan

13

ตกลงนี่เป็นบทเรียนสั้น ๆ เกี่ยวกับความสำคัญของ CSS ฉันหวังว่าด้านล่างจะช่วยได้!

ก่อนอื่นทุกส่วนของชื่อสไตล์เป็นน้ำหนักดังนั้นองค์ประกอบเพิ่มเติมที่คุณมีที่เกี่ยวข้องกับสไตล์นั้นสำคัญยิ่งขึ้น ตัวอย่างเช่น

#P1 .Page {height:100px;}

มีความสำคัญมากกว่า:

.Page {height:100px;}

ดังนั้นเมื่อใช้งานสิ่งสำคัญควรใช้เมื่อจำเป็นจริงๆเท่านั้น ดังนั้นเพื่อลบล้าง decleration ให้สร้างสไตล์ที่เฉพาะเจาะจงมากขึ้น แต่ยังมีการแทนที่ ดูด้านล่าง:

td {width:100px !important;}
table tr td .override {width:150px !important;}

ฉันหวังว่านี่จะช่วยได้!!!

— KM123
แหล่งที่มา

สอง!importantสามารถแทนที่ได้โดยกำหนด. old-class-name {bla bla bla}เป็น. old-class-name.overrided {bla bla bla}ใน<style></style>แท็กด้านบนส่วนประกอบมันใช้งานได้สำหรับฉัน

— Tarek Kalaji

11

แทนที่ด้วย JavaScript

$('.mytable td').attr('style', 'display: none !important');

ทำงานให้ฉัน

— Manish Shrivastava
แหล่งที่มา

ฉันคิดว่ารูปแบบอินไลน์จะแทนที่ความสำคัญของผู้ปกครองเสมอ! ธง.

— Joshua Ramirez

3

@JoshuaRamirez ไม่จริง ๆ แล้วพวกเขาไม่ได้แทนที่ธงที่สำคัญเว้นแต่คุณจะใส่! flag สำคัญแบบอินไลน์เช่นกัน

— Cam

1

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

— SilverbackNet

@SilverbackNet ตามความเข้าใจของฉันการเอาชนะการใช้ JS นั้นแม่นยำมากขึ้นและมักจะทำงานเป็นโหลด CSS ตามลำดับและโหลด JS jquery block หลังจากทุกอย่างถูกโหลด ดังนั้นจึงแทนที่การเปลี่ยนแปลงที่ทำโดย css ที่เป็นอิสระจากลำดับ css

— Manish Shrivastava

การเอาชนะเช่นนี้ไม่สามารถใช้ได้กับแอตทริบิวต์ของสไตล์

— user2284570

6

สิ่งนี้สามารถช่วยได้เช่นกัน

td[style] {height: 50px !important;}

สิ่งนี้จะแทนที่สไตล์อินไลน์ใด ๆ

— DiChrist
แหล่งที่มา

0

ในกรณีใด ๆ คุณสามารถแทนที่ด้วยheightmax-height

— Pasquale
แหล่งที่มา

-5

ฉันต้องการเพิ่มคำตอบสำหรับสิ่งที่ยังไม่ได้กล่าวถึงเนื่องจากฉันได้ลองทุกอย่างที่กล่าวมาแล้วเพื่อประโยชน์ สถานการณ์เฉพาะของฉันคือฉันกำลังใช้ semantic-ui ซึ่งสร้างขึ้นใน!importantคุณลักษณะในองค์ประกอบ (น่ารำคาญมาก) ฉันพยายามทุกอย่างเพื่อลบล้างมันมีเพียงสิ่งเดียวเท่านั้นที่ใช้งานได้ในที่สุด (โดยใช้ jquery) มันเป็นดังนี้:

$('.active').css('cssText', 'border-radius: 0px !important');

— IWI
แหล่งที่มา

สิ่งนี้ใช้ไม่ได้ดูคำตอบโดย Manish ที่ใช้attr('style', ...แทน

— Christophe Roussy