সিএসএসের অগ্রাধিকারের আদেশ কী?

Question

আমি বুঝতে চেষ্টা করছি যে আমার একটি CSS ক্লাস কেন অন্যটিকে (এবং অন্যদিকে নয়) ওভাররাইড করে বলে মনে হচ্ছে

এখানে আমার দুটি সিএসএস ক্লাস আছে

.smallbox { 
    background-color: white;
    height: 75px;
    width: 150px;
    font-size:20px;
    box-shadow: 0 0 10px #ccc;
    font-family: inherit;
}

.smallbox-paysummary {
    @extend .smallbox; 
    font-size:10px;
}

এবং আমার দৃষ্টিতে আমি কল করি

<pre class = "span12 pre-scrollable smallbox-paysummary smallbox "> 

হরফ (ওভারল্যাপিং উপাদান) 20 এর পরিবর্তে 10px হিসাবে দেখায় - কেউ কি ব্যাখ্যা করতে পারে যে কেন এটি হল?

Comments

আপনি কি সিএসএস প্রি-প্রসেসর ব্যবহার করছেন? আমি দেখতে পাচ্ছি যে এটি আপনার কাছে @extend .smallbox;অ-মানক সিএসএসের মতো দেখাচ্ছে।

— জেরেদ ফারিশ

আপনার সত্যিই একত্রিত হওয়া উচিত নয় @extend- যদি এটি আমার মনে হয় যা এটি করে - এবং একই উপাদানটিতে উভয় নির্বাচককে ব্যবহার করা।

— মিলিমুজ

এসএমএসিএসএস কেবল পরিবর্তিত বৈশিষ্ট্যগুলিকে একটি "সাবক্লাস" (যেমন .smallbox-paysummary) এর মধ্যে অন্তর্ভুক্ত করার পরামর্শ দিচ্ছে এবং .smallbox.smallbox-paysummary { font-size: 10px; }

— optionচ্ছিকভাবে

এবং যদি আপনি .smallbox-paysummaryএটির চেয়ে একটি ছোট ফন্ট রাখতে চান না , তবে কেন আপনি প্রথমে এটি ছোট করে তুলছেন?

— মিলিমুজ

এখন আমি ভাবছি যে সিএসএস বিধিগুলির শৃঙ্খলা নির্বিশেষে উপাদানগুলির শ্রেণীর গুণাবলী সম্পর্কে পরে বর্ণিত নিয়মের দুটিই নিয়মের যদি একই বৈশিষ্ট্য থাকে তবে কেন তা অগ্রাধিকার গ্রহণ করবে না।

— অ্যান্ডি

Answer 1

বেশ কয়েকটি বিধি রয়েছে (এই ক্রমে প্রয়োগ করা হয়েছে):

1. ইনলাইন সিএসএস (এইচটিএমএল স্টাইল বৈশিষ্ট্য) স্টাইল ট্যাগ এবং সিএসএস ফাইলে CSS বিধিগুলিকে ওভাররাইড করে
2. আরও নির্দিষ্ট নির্বাচক কম নির্দিষ্ট একটির চেয়ে বেশি অগ্রাধিকার গ্রহণ করে
3. কোডগুলিতে পরে প্রকাশিত বিধিগুলি উভয়টির একই স্বতন্ত্রতা থাকলে পূর্ববর্তী নিয়মগুলিকে ওভাররাইড করে।
4. !importantসর্বদা একটি সিএসএস নিয়ম প্রাধান্য নেয়।

আপনার ক্ষেত্রে এটির বিধি 3 প্রযোজ্য।

একক নির্বাচকদের জন্য সর্বোচ্চ থেকে সর্বনিম্ন নীচে:

• আইডি (উদাহরণ: #mainনির্বাচন <div id="main">)
• ক্লাস (প্রাক্তন . .myclass:), গুণাবলী নির্বাচক (প্রাক্তন . [href=^https:]:) এবং সিউডো-ক্লাস (প্রাক্তন . :hover:)
• উপাদানসমূহ (প্রাক্তন . div:) এবং ছদ্ম-উপাদান (প্রাক্তন . ::before:)

দুটি সমন্বিত নির্বাচকের স্বতন্ত্রতা তুলনা করতে, উপরের প্রতিটি নির্দিষ্টকরণের গ্রুপের একক নির্বাচকদের সংখ্যার তুলনা করুন।

উদাহরণ: তুলনা #nav ul li a:hoverকরার#nav ul li.active a::after

• আইডি নির্বাচক সংখ্যা গণনা: প্রতিটি জন্য একটি আছে ( #nav)
• শ্রেণি নির্বাচকদের সংখ্যা গণনা করুন: প্রত্যেকের জন্য একটি ( :hoverএবং .active) রয়েছে
• উপাদান নির্বাচকগুলির সংখ্যা গণনা করুন: ul li aপ্রথমটির জন্য 3 ( ) এবং দ্বিতীয় ( ul li a ::after) এর জন্য 4 রয়েছে , এইভাবে দ্বিতীয় সংযুক্ত নির্বাচক আরও নির্দিষ্ট।

সিএসএস নির্বাচকের নির্দিষ্টতা সম্পর্কে একটি ভাল নিবন্ধ ।

Comments

কীভাবে সুনির্দিষ্টতা ইনলাইন শৈলীর ঘোষণাকে ওভাররাইড করে?

— জ্যারেড ফারিশ

"... স্টাইল ট্যাগে সিএসএস বিধি ... সিএসএস ফাইলে নিয়মগুলিকে ওভাররাইড করে"। আমি এই কল্পকাহিনীটি সম্প্রতি কয়েকবার দেখেছি। কোথা থেকে এসেছে তা আমি জানি না, তবে এটি বাজে।

— অলহকি

@ জারেড আমি প্রথম দুটি পয়েন্ট অদলবদল করেছিলাম। এটাই কি তুমি বোঝাতে চাইছ?

— লরেঞ্জ মেয়ার

হ্যাঁ, এটাই আমি বোঝাতে চেয়েছিলাম

— জেরেদ ফারিশ

@ পাকিপ্যাট :hoverকোনও শ্রেণি নির্বাচক নয়, তবে ছদ্ম-শ্রেণির নির্বাচক।

— লোরেঞ্জ মেয়ার

Answer 2

এখানে একটি ডায়াগ্রামে সিএসএস স্টাইলিং অর্ডার সংকলন করা হয়েছে, যার উপর সিএসএস বিধিগুলির অগ্রাধিকার রয়েছে এবং বাকীগুলির চেয়ে অগ্রাধিকার গ্রহণ করুন:

অস্বীকৃতি : আমার দল এবং আমি এই ব্লগ পোস্টের সাথে একসাথে কাজ করেছি ( https://vecta.io/blog/definitive-guide-to-css-styling- অর্ডার) যা আমার মনে হয় সমস্ত সামনের দিকে কার্যকর হবে ডেভেলপারদের।

Comments

সেই চিত্রটির একটি বিশেষ মানসিকতা দরকার। আমার জন্য স্টাইলের উত্তরাধিকারের চেয়ে চিত্রটি বোঝা আরও জটিল।

— লরেঞ্জ মেয়ার

Answer 3

আমরা এখানে যা দেখছি তাকে মজিলা বলেছে নির্দিষ্টতা বলা হয় :

বৈশিষ্ট্য হ'ল উপায় যা ব্রাউজারগুলি কোনও সিএসএসের সম্পত্তি মানগুলি কোনও উপাদানের সাথে সর্বাধিক প্রাসঙ্গিক এবং তাই প্রয়োগ করা হবে। নির্দিষ্টতা সিএসএস নির্বাচকদের বিভিন্ন ধরণের সমন্বয়ে গঠিত মিলের নিয়মের উপর ভিত্তি করে based

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

আমি https://specifishity.com এ 0-0-0 এর ব্যাখ্যা পছন্দ করি :

বেশ বর্ণনামূলক চিত্রের !importantনির্দেশনা! তবে কখনও কখনও এটি ইনলাইন styleবৈশিষ্ট্যটিকে ওভাররাইড করার একমাত্র উপায় । সুতরাং উভয় এড়াতে চেষ্টা করা এটি একটি সেরা অনুশীলন।

Comments

চমৎকার। আমি কি খুঁজছিলাম এই গ্রাফিকটি দুর্দান্ত লোল।

— saran3h

Answer 4

প্রথমত, আপনার @extendনির্দেশের ভিত্তিতে , মনে হয় আপনি খাঁটি সিএসএস ব্যবহার করছেন না, তবে এসএএসএস ওএস স্টাইলাসের মতো একটি প্রিপ্রেসেসর।

এখন, যখন আমরা সিএসএসে "অর্ডারের অগ্রাধিকার" সম্পর্কে কথা বলি তখন একটি সাধারণ নিয়ম জড়িত থাকে: অন্যান্য নিয়মের পরে যে কোনও বিধি নির্ধারণ করা হয় (টপ-ডাউন ফ্যাশনে) প্রয়োগ করা হয়। আপনার ক্ষেত্রে, কেবলমাত্র নির্দিষ্ট করার .smallboxপরে .smallbox-paysummaryআপনি নিজের নিয়মের নজরে পরিবর্তন করতে সক্ষম হবেন।

তবে আপনি যদি আরও কিছুটা যেতে চান তবে আমি এই পড়ার পরামর্শ দিচ্ছি: CSS ক্যাসকেড ডাব্লু 3 সি স্পেসিফিকেশন । আপনি দেখতে পাবেন যে কোনও নিয়মের নজির ভিত্তিক:

1. বর্তমান মিডিয়া টাইপ;
2. গুরুত্ব;
3. মূল;
4. নির্বাচকটির নির্দিষ্টতা এবং শেষ পর্যন্ত আমাদের সুপরিচিত নিয়ম:
5. কোনটি পরে নির্দিষ্ট করা আছে।

Answer 5

এএস ডাব্লু 3 তে রাষ্ট্র: ডাব্লু 3 ক্যাসকেড সিএসএস

বিভিন্ন স্টাইলের শীটটি প্রয়োগ করা হয় এমন অর্ডিন (ডাব্লু 3 ক্যাসকেডিং বিভাগের উদ্ধৃতি):

1. ব্যবহারকারী এজেন্ট ঘোষণা

2. ব্যবহারকারীর সাধারণ ঘোষণা

3. লেখক সাধারণ ঘোষণা

4. লেখক গুরুত্বপূর্ণ ঘোষণা

5. ব্যবহারকারীর গুরুত্বপূর্ণ ঘোষণা

উল্লেখ করা ডাব্লু 3 নথিতে এটি সম্পর্কে আরও তথ্য

Answer 6

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

আপনার ক্ষেত্রে 10px অগ্রাধিকার .smallbox-paysummaryপরে সংজ্ঞায়িত করা হয় .smallbox।

Answer 7

Element, Pseudo Element: d = 1 – (0,0,0,1)
Class, Pseudo class, Attribute: c = 1 – (0,0,1,0)
Id: b = 1 – (0,1,0,0)
Inline Style: a = 1 – (1,0,0,0)

ইনলাইন সিএসএস (এইচটিএমএল স্টাইল বৈশিষ্ট্য) স্টাইল ট্যাগ এবং সিএসএস ফাইলে CSS বিধিগুলিকে ওভাররাইড করে

আরও নির্দিষ্ট নির্বাচক কম নির্দিষ্ট ব্যক্তির চেয়ে অগ্রাধিকার গ্রহণ করে।

কোডগুলিতে পরে প্রকাশিত বিধিগুলি উভয়টির একই স্বতন্ত্রতা থাকলে পূর্ববর্তী নিয়মগুলিকে ওভাররাইড করে।

Comments

এখানে একটি ভাল ব্যাখ্যার কথা: vanseodesign.com/css/css-specificity-inheritance-cascaade

— akostadinov

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

— সিগুজা

Answer 8

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

<html>
<head>
<style>.container-ext { width: 100%; }</style>
<style>.container { width: 50px; }</style>
</head>
<body>
<div class="container container-ext">Hello World</div>
</body>

... ডিভের প্রস্থ 50px হবে

Comments

এটি আসলে নজির নয়, এটি ক্যাসকেডিং স্টাইল শীটের ক্যাসকেডিং অংশ।

— টাইলার