কীভাবে ওভাররাইড করা যায়!


250

আমি একটি কাস্টম স্টাইল শীট তৈরি করেছি যা আমার ওয়ার্ডপ্রেস টেম্পলেটটির জন্য মূল সিএসএসকে ওভাররাইড করে। তবে, আমার ক্যালেন্ডার পৃষ্ঠায়, মূল সিএসএসের !importantঘোষণার সাথে প্রতিটি টেবিল ঘরের উচ্চতা রয়েছে :

td {height: 100px !important}

আমি কি এটিকে ওভাররাইড করতে পারি?


3
!importantআপনিও ব্যবহার করার চেষ্টা করেছেন? যদি আপনার সিএসএস শীটটি মূল টেমপ্লেটের পরে সংজ্ঞায়িত করা হয় তবে এটি ভালভাবে কাজ করা উচিত।
পেট্রা জেনেয়েক

1
কোন শীট শেষ আসে, আপনার নাকি টেম্পলেটটির?
j08691

67
এ কারণেই !importantক্ষতিকারক হিসাবে বিবেচিত হয়।
স্পুডলে

8
সর্বাধিক শক্তিশালী উপায়টি এর মতো: টিডি [শৈলী]: উচ্চতা: ১১০ পিক্স! গুরুত্বপূর্ণ; }। এটি এমনভাবে কাজ করে যে আপনি এইচটিএমএলে শৈলীর ইনলাইন ইনজেকশন দিয়েছেন কারণ আপনি ট্যাগের আসল শৈলীর বৈশিষ্ট্যে শৈলীগুলি প্রয়োগ করছেন।
DMTintner

উত্তর:


352

গুরুত্বপূর্ণ সংশোধককে ওভাররাইড করছে

  1. কেবল এর সাথে অন্য একটি সিএসএস বিধি যুক্ত করুন !important, এবং নির্বাচককে একটি উচ্চতর নির্দিষ্টতা দিন (নির্বাচককে একটি অতিরিক্ত ট্যাগ, আইডি বা ক্লাস যুক্ত করুন)
  2. বিদ্যমান নির্বাচনের চেয়ে পরবর্তী পয়েন্টে একই সিলেক্টরের সাথে সিএসএস বিধি যুক্ত করুন (টাইতে, শেষেরটি নির্ধারিত জয়ে)।

উচ্চতর নির্দিষ্টতা সহ কয়েকটি উদাহরণ (প্রথমটি সর্বোচ্চ / ওভাররাইড, তৃতীয়টি সর্বনিম্ন):

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

বা বিদ্যমান নির্বাচনের পরে একই নির্বাচক যুক্ত করুন:

td {height: 50px !important;}

দাবি পরিত্যাগী:

এটি ব্যবহার করা প্রায়শই ভাল ধারণা নয় !important। এটি ওয়ার্ডপ্রেস টেম্পলেটটির নির্মাতাদের দ্বারা খারাপ ইঞ্জিনিয়ারিং। ভাইরাল ফ্যাশনে এটি টেমপ্লেটের ব্যবহারকারীদের !importantএটিকে ওভাররাইড করার জন্য তাদের নিজস্ব পরিবর্তনকারী যুক্ত করতে বাধ্য করে এবং এটি জাভাস্ক্রিপ্টের মাধ্যমে ওভাররাইড করার বিকল্পগুলিকে সীমাবদ্ধ করে।

তবে, আপনাকে কীভাবে ওভাররাইড করতে হয় তা জানার জন্য এটি দরকারী you


7
আমি জানি যে এটি উত্তরের পুরানো দিকের দিক থেকে কিছুটা, তবে আপনি সম্ভবত একটি মন্তব্য যুক্ত করতে পারেন যে এটি আপনার সিএসএসকে লেখার চরম বাজে উপায় (বা যদি আপনি একমত না হন তবে কেন এটি গ্রহণযোগ্য?) আমি লোকদের এই উত্তরটি উল্লেখ করতে দেখেছি ... :)
জেনমাস্টার

দুর্দান্ত উত্তর। আমি একমত, এটি একটি গোলযোগ। এটি আমাকে তাদের হ্যাকের চারপাশে হ্যাক করতে বাধ্য করে, তারপরে কেউ আমার হ্যাক ইত্যাদির চারপাশে হ্যাক করতে পারে my আমার ক্ষেত্রে আমাকে টেমপ্লেটগুলি নিয়ে কাজ করতে হয় যা কোথাও একটি ডাটাবেস থেকে তাদের সিএসএস টানতে পারে। আমি ডিবি ডাম্প গ্রেপ করি এবং এটি আমাকে দেখায় যে এটি 1 এমবি জেসন ব্লব থেকে এসেছে। এটি কোথায় পরিবর্তন করতে হবে তা অনুসন্ধানে আমার পক্ষে খুব দরকারী নয়, আমাকে এই কোডটি বাদ দিয়ে কোনও কোড ফাইলে সিএসএস যুক্ত করতে বাধ্য করা, এটি করা উচিত।
জোশ রিবাকফ


এটি ট্যাগটি শনাক্তকারী যুক্ত করা ভাল ধারণা হতে পারে যদিও এটি সিএসএসকে ধীর করে দেয়। আমাকে ডিভ # শিরোলেখের শৃঙ্খলা {স্টাইল রাখতে হবে যেখানে একটি ঠিক করতে হয়েছিল:; take এটি গ্রহণ করার জন্য ... খুব বিরক্তিকর
স্পারাটান 117

জন্য ভাল ব্যবহার আছে !important। স্টাইলিশ, অ্যাডব্লক, বা ইউব্লক স্ক্রিপ্ট থেকে ব্রাউজারের মতো বা সাইট-প্রশস্ত শৈলীর ওভাররাইড Like অথবা যখন বেস সিএসএসে আপনার কোনও যুক্তিসঙ্গতভাবে সহজ অ্যাক্সেস নেই, যা খুব জটিল হতে পারে, অনেকগুলি ফাইলে ছড়িয়ে পড়ে এবং সময়ের সাথে সাথে পরিবর্তিত হয় (এবং এটি ব্যবহারও করতে পারে !important)। যে কোনও সরঞ্জামের মতো, ইতিবাচক বা নেতিবাচক সম্ভাবনা আপনি কীভাবে এটি ব্যবহার করেন তার উপর ভিত্তি করে। যখনই এর মতো জিনিসগুলি বা গোটো / এভাল / গ্লোবালস / ইত্যাদির মতো জিনিসগুলিকে লোকেরা বন্ধ রাখতে হবে। উল্লেখ করা হয়। পাশাপাশি "ওয়ার্ডপ্রেস এড়ান" বা "সিএসএস এড়ান" বলুন কারণ "গণ্ডগোলের বিষয়গুলি আপ" করার সম্ভাবনা খুব দুর্দান্ত।
বিজেজর

30

!importantকেবলমাত্র আপনি পরস্পরবিরোধী সঙ্গে আপনার স্টাইল শীট নির্বাচকরা আছে ব্যবহার করা উচিত নির্দিষ্টতা

তবে আপনার বিরোধী সুনির্দিষ্টতা থাকা সত্ত্বেও ব্যতিক্রমের জন্য আরও সুনির্দিষ্ট নির্বাচক তৈরি করা ভাল। আপনার ক্ষেত্রে classআপনার এইচটিএমএল থাকা ভাল যা আপনি !importantনিয়মের প্রয়োজন নেই এমন একটি আরও নির্দিষ্ট নির্বাচক তৈরি করতে ব্যবহার করতে পারেন ।

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

আমি ব্যক্তিগতভাবে কখনই !importantআমার স্টাইল শিটগুলিতে ব্যবহার করি না । মনে রাখবেন সিএসএসে সি ক্যাসকেডিংয়ের জন্য। ব্যবহার !importantকরলে এটি ভেঙে যাবে।


17
এটি সত্য নয়। একটি !importantস্টাইলশীট মধ্যে নিয়ম একটি মধ্যে একটি স্বাভাবিক নিয়ম ওভাররাইড করবে styleউদাহরণস্বরূপ, ট্যাগ। যাইহোক, কিছু পরিস্থিতিতে এটি প্রদর্শিত হবে যে আরও নির্দিষ্ট নিয়ম এটি ওভাররাইড করে। উদাহরণস্বরূপ, যদি আপনি একটি সেট font-size: 24pt !importantউপর body, আপনি কি এখনও এটি একটি সঙ্গে ওভাররাইড করতে পারে font-size: 12ptউপর p। এই কারণ আপনার অগ্রাহ্য হয় না !importantনিয়ম, আপনি অন্তর্নিহিত অগ্রাহ্য করা হয় font-size: inheritউপর p
meususus

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>


2
সম্ভাব্যভাবে ব্যবহারকারীর সিপিইউতে স্ট্রেন করুন
বেরি সাকালা

2
দেখে মনে হচ্ছে এই কৌশলটি আর কাজ করে না। ফায়ারফক্স 78 এবং ক্রোম 83 এ, বাক্সটি এখনও লাল রঙের।
অ্যান্ডি প্যান

13

ঠিক আছে এখানে সিএসএসের গুরুত্ব সম্পর্কে একটি দ্রুত পাঠ। আমি আশা করি যে নীচে সাহায্য করবে!

শৈলীর প্রতিটি অংশের মধ্যে প্রথমে একটি ওজন হিসাবে নাম রাখা হয়, সুতরাং আপনার কাছে যত বেশি উপাদান থাকে সেই শৈলীর সাথে সম্পর্কিত এটি যত বেশি গুরুত্বপূর্ণ। উদাহরণ স্বরূপ

#P1 .Page {height:100px;}

এর চেয়ে গুরুত্বপূর্ণ:

.Page {height:100px;}

সুতরাং গুরুত্বপূর্ণ ব্যবহার করার সময়, আদর্শভাবে এটি কেবল কখনই ব্যবহার করা উচিত, যখন সত্যই প্রয়োজন হয়। সুতরাং ডিক্লেরেশনকে ওভার্রাইড করার জন্য, শৈলীটিকে আরও সুনির্দিষ্ট করুন তবে একটি ওভাররাইড দিয়ে। নিচে দেখ:

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

আশা করি এটা কাজে লাগবে!!!


দুই !importantপুনরায় সংজ্ঞায়িত ওভাররাইড হতে পারে .old ক্লাসের-নাম {bla bla bla} যেমন .old ক্লাসের-name.overrided {bla bla bla} মধ্যে <style></style>উপাদান উপরে ট্যাগ, আমার জন্য এটি এর কাজ
তারেক Kalaji

11

জাভাস্ক্রিপ্ট ব্যবহার করে ওভাররাইড করুন

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

আমার জন্য কাজ করেছেন।


আমি ভেবেছিলাম ইনলাইন স্টাইলগুলি সর্বদা পিতামাতার গুরুত্বপূর্ণ বিষয়টিকে ওভাররাইড করে! পতাকা।
জোশুয়া রামিরেজ

3
@ জোশুয়া রামিরেজ না আপনি যদি গুরুত্বপূর্ণ পতাকাটি ইনলাইন না রেখে থাকেন তবে প্রকৃতপক্ষে তারা কোনও গুরুত্বপূর্ণ পতাকাকে ওভাররাইড করবে না
ক্যাম

1
আপনি যদি জেএস ব্যবহার করতে চলেছেন তবে আপনি কেবলমাত্র উপাদানটিকে পুরোপুরি মুছে ফেলতে পারেন, যদি না দূরবর্তী সম্ভাবনা না থাকে তবে আপনার এটির আবার প্রয়োজন হবে না। স্ট্যাকিং! জেএসের মাধ্যমে গুরুত্বপূর্ণ আপনাকে কেবল আসল প্রশ্নে ফিরিয়ে আনবে।
সিলভারব্যাক

@ সিলভারব্যাক নেট আমার বোঝাপড়া অনুসারে, জেএস ব্যবহার করে ওভাররাইড করা আরও নির্ভুল এবং সাধারণত সমস্ত কিছু লোড হওয়ার পরে ক্রম অনুসারে সিএসএস লোড এবং জেএস জ্যাকুই ব্লক লোড হিসাবে কাজ করে। সুতরাং, এটি সিএসএস সিকোয়েন্স থেকে স্বতন্ত্র CSS দ্বারা করা পরিবর্তনগুলি ওভাররাইড করে।
মণীশ শ্রীবাস্তব

এই জাতীয় ওভাররাইড স্টাইল বৈশিষ্ট্যের জন্য কাজ করে না।
ব্যবহারকারী 2284570

6

এটিও সাহায্য করতে পারে

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

এটি যে কোনও ইনলাইন স্টাইলকে ওভাররাইড করবে


0

যাই হোক, আপনি ওভাররাইড করতে পারে heightসঙ্গে max-height


-5

আমি এর উত্তর উল্লেখ করতে চাই না যা উল্লেখ করা হয়নি, কারণ আমি উপরোক্ত সমস্ত চেষ্টা করেও কোন লাভ হয়নি। আমার নির্দিষ্ট পরিস্থিতি হ'ল আমি শব্দার্থ-ইউআই ব্যবহার করছি যা !importantউপাদানগুলির উপর গুণাবলী তৈরি করেছে (অত্যন্ত বিরক্তিকর)। আমি এটিকে ওভাররাইড করার জন্য সমস্ত কিছু চেষ্টা করেছি, কেবল শেষ পর্যন্ত একটি জিনিস কাজ করেছিল (জ্যাকোয়ারি ব্যবহার করে)। এটি নিম্নরূপ:

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

এটি কার্যকর হয় না, attr('style', ...
মণীশের
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.