সিএসএসের নির্দিষ্টকরণের পয়েন্টগুলি কীভাবে গণনা করা হয়

Question

সুনির্দিষ্টতার গবেষণা নিয়ে আমি এই ব্লগকে হোঁচট খেয়েছি - http://www.htmldog.com/guides/cssadvanced/specificity/

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

উদাহরণ স্বরূপ:

বডি = 1 পয়েন্ট
বডি। র‌্যাপার = 11 পয়েন্ট
বডি। র‌্যাপার # কনটেনার = 111 পয়েন্ট

সুতরাং, এই পয়েন্টগুলি ব্যবহার করে, আমি নিম্নলিখিত সিএসএস এবং এইচটিএমএলটির ফলে পাঠ্যটি নীল হয়ে উঠবে বলে আশা করি:

#a {
    color: red;
}

.a .b .c .d .e .f .g .h .i .j .k .l .m .n .o {
  color: blue;
}

<div class="a">
  <div class="b">
    <div class="c">
      <div class="d">
        <div class="e">
          <div class="f">
            <div class="g">
              <div class="h">
                <div class="i">
                  <div class="j">
                    <div class="k">
                      <div class="l">
                        <div class="m">
                          <div class="n">
                            <div class="o" id="a">
                              This should be blue.
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

পাঠ্য কেন লাল হবে যখন ১ আইডির তুলনায় ১৫ টি পয়েন্ট সমান হবে যা 100 পয়েন্টের সমান?

স্পষ্টতই পয়েন্টগুলি মোট সংখ্যা নয়; তারা জড়িত এখানে সে সম্পর্কে আরও পড়ুন - http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

এর অর্থ কি আমাদের নির্বাচক = 0,0,15,0OR এর ক্লাসগুলি 0,1,5,0?

(আমার প্রবৃত্তিগুলি আমাকে এটি পূর্বেরটি বলে, যেমন আমরা জানি যে আইডি নির্বাচকটির নির্দিষ্টতাটি এরকম দেখাচ্ছে 0,1,0,0:)

Comments

: এখানে কিছু অদ্ভুত অত্যন্ত stackoverflow.com/questions/25565928/...

— Armel Larcier

Answer 1

Pekka এর উত্তর হল কার্যত সবচেয়ে ভালো উপায় ইস্যু সম্পর্কে ভাবতে সঠিক, এবং সম্ভবত।

যাইহোক, অনেকে ইতিমধ্যে চিহ্নিত করেছেন, ডব্লু 3 সি সিএসএসের সুপারিশে বলা হয়েছে যে "তিনটি সংখ্যার এবিসি (একটি বৃহত বেসের সাথে একটি সংখ্যা পদ্ধতিতে) সংবিধানের বিষয়টি স্পষ্টতা দেয়।" সুতরাং আমার মধ্যে গীকটি ঠিক বুঝতে পেরেছিল যে এই বেসটি কতটা বড়।

দেখা যাচ্ছে যে "খুব বড় বেস" নিযুক্ত করা হয়েছে (কমপক্ষে 4 সবচেয়ে সাধারণ ব্যবহৃত ব্রাউজার ^{* দ্বারা} ) এই স্ট্যান্ডার্ড অ্যালগরিদমটি বাস্তবায়নের জন্য 256 বা 2 ⁸ ।

এর অর্থ হ'ল 0 আইডি এবং 256 শ্রেণি-নাম দিয়ে নির্দিষ্ট করা একটি শৈলী কেবল 1 আইডি দিয়ে নির্দিষ্ট একটি স্টাইলকে ওভার রাইড করবে । আমি কিছু ফিডল দিয়ে এটি পরীক্ষা করেছি:

• 255 ক্লাস 1 আইডিকে ওভাররাইড করার জন্য যথেষ্ট নয়
• ... কিন্তু 256 শ্রেণীর দ্বারা 1 আইডি ওভাররাইড করতে যথেষ্ট

• ... এবং 256 ট্যাগ নাম হয় 1 বর্গ-নাম ওভাররাইড করতে যথেষ্ট

• ... তবে, হায়রে 256 আইডিগুলি 1 টি ইনলাইন স্টাইলকে ওভাররাইড করার জন্য যথেষ্ট নয় (আপডেট করা হয়েছে 2012/8/15 - আপনাকে ব্যবহার করতে হবে !important)

সুতরাং কার্যকরভাবে একটি "পয়েন্ট সিস্টেম" রয়েছে তবে এটি বেস 10 নয় এটি এর ভিত্তি 256 it এটি কীভাবে কাজ করে তা এখানে:

(২ ⁸ ) ² বা 65536, নির্বাচকের আইডির সংখ্যার
(+ 2 ⁸ ) ¹ বা 256 বার, নির্বাচকের শ্রেণি-নামগুলির সংখ্যার বার
(+ ⁸ ) ⁰ বা 1, ট্যাগের সংখ্যার দ্বিগুণ- নির্বাচক নাম

ধারণাটি যোগাযোগের জন্য এটি ব্যাক-অফ-অফ-খামের অনুশীলনের জন্য খুব ব্যবহারিক নয়।
এই কারণেই সম্ভবত এই বিষয়ে নিবন্ধগুলি বেস 10 ব্যবহার করছে।

***** [অপেরা 2 ¹⁶ ব্যবহার করে (কার্লকো এর মন্তব্য দেখুন)। কিছু অন্যান্য নির্বাচক ইঞ্জিন অনন্ত ব্যবহার করে - কার্যকরভাবে কোনও পয়েন্ট সিস্টেম নেই (সাইমন সাপিনের মন্তব্য দেখুন)]

আপডেট, জুলাই ২০১৪:
ব্লেজমোনজার যেমন বছরের শুরুতে ইঙ্গিত করেছিল, ওয়েবকিট ব্রাউজারগুলি (ক্রোম, সাফারি) এখন 256 এর চেয়ে বেশি বেস ব্যবহার করতে দেখা যাচ্ছে Ope সম্ভবত 2 ¹⁶ , অপেরার মতো? IE এবং ফায়ারফক্স এখনও 256 ব্যবহার করে।

Comments

গুরুত্বপূর্ণ: দয়া করে মনে রাখবেন সংখ্যা 256 নয় বৈশিষ্ট । সুতরাং, এই উত্তরটি একটি (স্বীকারযোগ্যভাবে কার্যকর) প্রয়োগের বিশদ বর্ণনা করে।

— ম্যাট ফেনউইক

@ ম্যাটফেনউইক যেমন বলেছেন 256 কেবল তা নয়, তবে তা বাস্তবায়নের ক্ষেত্রেও পরিবর্তিত হয়। এটি অপেরাতে দৃশ্যত বৃহত্তর। WeasyPrint এবং cssselect এটি "অনন্ত" is: আমি ব্যবহার পূর্ণসংখ্যার একটি tuple একটি একক পূর্ণসংখ্যা পরিবর্তে।

— সাইমন সপিন

@ ফাস্ট অপেরা 8 এর পরিবর্তে 16 টি বিট ব্যবহার করে

— কর্লকো

এই উত্তরটির সত্যিকার অর্থে পেক্কার উত্তরের চেয়ে আরও বাস্তবিক বর্ণনা রয়েছে। @ ম্যাট ফেনউইক মূলত যা বলে: আপনি যা বর্ণনা করছেন তা অনুমানের ব্যবহারিক বাস্তবায়ন । এতে একটি ত্রুটিযুক্ত, তবে লেখক বা প্রয়োগকারীরা যে কোনও কিছুই করা উচিত নয়।

— BoltClock

ওয়েবকিট (ক্রোম এবং সাফারি) এর বর্তমান সংস্করণগুলিতে 256 অপর্যাপ্ত বলে মনে হচ্ছে, @ ম্যাটফেনউইকের পয়েন্টটিকে আরও আন্ডারস্কোর করে।

— ব্লেজমোনজার

Answer 2

ভাল প্রশ্ন.

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

নির্দিষ্টতা কীভাবে আচরণ করে তা আমার অভিজ্ঞতার সাথে মিলছে matches

তবে ক্লাসের কিছু স্ট্যাকিং থাকতে হবে কারণ এটি

.a .b .c .d .e .f .g .h .i .j .k .l .m .n .o

তুলনায় আরও নির্দিষ্ট

.o

আমার একমাত্র ব্যাখ্যা হ'ল স্ট্যাকড ক্লাসগুলির সুনির্দিষ্টতা কেবল একে অপরের বিরুদ্ধে গণনা করা হয় তবে আইডিগুলির বিরুদ্ধে নয়।

আপডেট : আমি এখন এটি অর্ধপথে পেতে। এটি কোনও পয়েন্ট সিস্টেম নয় এবং 15 পয়েন্ট ওজনের ক্লাস সম্পর্কে তথ্য ভুল। এটি একটি 4-অংশ সংখ্যায়ন সিস্টেম এখানে খুব ভালভাবে ব্যাখ্যা করা হয়েছে ।

শুরুর পয়েন্টটি 4 টি চিত্র:

style  id   class element
0,     0,   0,    0

সুনির্দিষ্টতার উপর ডাব্লু 3 সি ব্যাখ্যা অনুসারে , উপরোক্ত বিধিগুলির জন্য সুনির্দিষ্ট মানগুলি হ'ল:

#a            0,1,0,0    = 100
classes       0,0,15,0   = ... see the comments

এটি একটি বৃহত (অপরিজ্ঞাত?) বেস সহ একটি সংখ্যা পদ্ধতি।

আমার বোধগম্যতা হ'ল বেসটি খুব বড় হওয়ায়, কলাম 4-তে কোনও সংখ্যা কলাম 3, কলাম 1-তে একই সংখ্যা> 0 কে পরাজিত করতে পারে না .... এটি কি সঠিক?

আমি আগ্রহী যে মঠের চেয়ে আরও ভাল গ্রন্থের সাথে আমার সংখ্যা নির্ধারণের সিস্টেমটি ব্যাখ্যা করা যায় এবং যখন পৃথক উপাদান 9 এর চেয়ে বড় হয় তখন কীভাবে এটি দশমিক রূপান্তর করা যায়।

Comments

এটি কারণ .o এবং .a .b ইত্যাদির মধ্যে তাই এটি তাদের সম্মিলিতভাবে বিবেচনা করবে ts তবে একটি আইডি এবং শ্রেণীর মধ্যে যেমন: .a এবং #a আইডি সর্বদা শক্তি প্রয়োগ করে। এটি (আমি ধরে নিই) কেবলমাত্র ক্লাসগুলির মধ্যে গণনা করা হবে যখন আরও বেশি পাওয়ার পাওয়ার অ্যাট্রি নেই। উদাহরণস্বরূপ ক্লাস উপাদান থেকে আইডি ও ক্লাসের উপরে চলে যাবে।

— Sphvn

@ ওজাকি এটিই আমি ধরে নিচ্ছি, তবে এটি পয়েন্ট সিস্টেম সম্পর্কে ওপি যা বলছে তার বিরোধিতা করে। খেলতে হবে আরও কিছু। আমি এর পিছনে নিয়ম দেখতে চাই।

— পেক্কা

ঠিক বুঝতে পেরেছি যে আমরা উভয়ই একই সিদ্ধান্তে এসেছি। চমৎকার কাজ!

— স্যাম

গণিত পক্ষের জন্য, আমরা এখানে বেস 16 এ কাজ করতে পারি (কারণ পৃথক সংখ্যার কোনওটিই 15 এর বেশি নয়)। সুতরাং 0,1,0,0 = 0100h = 256 0,0,15,0 = 00f0h = 240 256> 240 সুতরাং আইডি নির্বাচক জিতেছে।

— ম্যাথু উইলসন

হ্যাঁ, আপনি একটি বড় বেস সহ একটি সংখ্যা সিস্টেমে সম্পন্ন হিসাবে নির্দিষ্টকরণের গণনাগুলি ভাবতে পারেন। আমি মনে করি "কনটেনেটেটিং" শব্দটি (সেই অনুমানেও ব্যবহৃত হয়েছিল) যদিও এর চেয়ে আরও ভাল বর্ণনা। (একটি নতুন প্রশ্নের উত্তর থেকে এখানে এসেছেন যা

— এটির একটি ধূপ হিসাবে প্রমাণিত হয়

Answer 3

বর্তমান নির্বাচক স্তর 4 ওয়ার্কিং ড্রাফ্ট সিএসএসে বৈশিষ্ট্য বর্ণনা করার জন্য একটি ভাল কাজ করে:

বৈশিষ্ট্যগুলি তিনটি উপাদানের সাথে তুলনা করে তুলনা করা হয়: বৃহত্তর এ মানের সাথে সুনির্দিষ্টতা আরও সুনির্দিষ্ট; যদি দুটি এ মানগুলি বাঁধা থাকে তবে বৃহত্তর বি মানযুক্ত বিশিষ্টতা আরও নির্দিষ্ট; যদি দুটি বি মানগুলিও বাঁধা থাকে, তবে বৃহত্তর সাথে নির্দিষ্টকরণ সি মানের সাথে বিশিষ্টতা আরও নির্দিষ্ট হয়; যদি সমস্ত মানগুলি বাঁধা থাকে তবে দুটি বৈশিষ্ট্য সমান equal

এর অর্থ হ'ল এ, বি এবং সি মানগুলি একে অপরের থেকে সম্পূর্ণ স্বতন্ত্র।

15 ক্লাসগুলি আপনার নির্বাচককে 150 এর নির্দিষ্টকরণের স্কোর দেয় না, এটি 15 এর একটি বি মান দেয় gives একটি একক single একটি মান এই পরাভূত যথেষ্ট।

রূপক হিসাবে, 1 জন পিতামাতা, 1 পিতা বা মাতা এবং 1 সন্তানের পরিবার কল্পনা করুন। এটি 1,1,1 হিসাবে উপস্থাপন করা যেতে পারে । যদি পিতামাতার 15 শিশু থাকে তবে তা হঠাৎ করে তাদের আর একজন পিতা বা মাতা করে না ( 1,2,0 )। এর অর্থ হল যে পিতা-মাতার একটি মাত্র আরও সন্তানের ( 1,1,15 ) সন্তানের চেয়ে তাদের আরও অনেক বেশি দায়িত্ব রয়েছে । ;)

একই ডকুমেন্টেশন আরও বলে:

স্টোরেজ সীমাবদ্ধতার কারণে, বাস্তবায়নের A , B বা c এর আকারের সীমাবদ্ধতা থাকতে পারে । যদি তা হয় তবে সীমা থেকে উচ্চতর মানগুলি অবশ্যই এই সীমাতে আবদ্ধ হওয়া উচিত, ওভারফ্লো নয়।

উপস্থাপিত সমস্যা মোকাবেলায় এটি যুক্ত করা হয়েছে ফাউস্টের উত্তরে , যার মাধ্যমে ২০১২ সালে সিএসএস বাস্তবায়নগুলি একে অপরের মধ্যে সুনির্দিষ্ট মানগুলিকে উপচে পড়ার অনুমতি দেয়।

২০১২ সালে, বেশিরভাগ ব্রাউজারগুলি 255 এর সীমাবদ্ধতা প্রয়োগ করেছিল, তবে এই সীমাবদ্ধতাটি উপচে পড়ার অনুমতি দেওয়া হয়েছিল। 255 ক্লাসে 0,255,0 এর একটি এ, বি, সি নির্দিষ্টকরণের স্কোর ছিল তবে 256 ক্লাস উপচে পড়েছে এবং এর A, B, সি স্কোর 1,0,0 ছিল । হঠাৎ আমাদের বি মানটি আমাদের একটি মান হয়ে উঠল । নির্বাচক স্তর 4 নথিটি সীমাটি কখনই প্রবাহিত হতে দেওয়া যাবে না তা উল্লেখ করে সেই সমস্যাটিকে সম্পূর্ণ বিড়ম্বিত করে। এই বাস্তবায়নের সাথে সাথে 255 এবং 256 উভয় শ্রেণীর 0,255,0 এর সমান A, B, c স্কোর হবে ।

ফাউস্টের উত্তরে প্রদত্ত সমস্যাটি বেশিরভাগ আধুনিক ব্রাউজারে স্থির করা হয়েছে ।

Answer 4

আমি বর্তমানে সিএসএস মাস্টারি: অ্যাডভান্সড ওয়েব স্ট্যান্ডার্ড সলিউশন বইটি ব্যবহার করছি ।

অধ্যায় 1, পৃষ্ঠা 16 বলেছেন:

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

(জোর আমার) এবং

নির্বাচকের বৈশিষ্ট্যটি চারটি উপাদান স্তরে বিভক্ত: ক, খ, সি এবং ডি।

• যদি শৈলীটি একটি ইনলাইন শৈলী হয়, তবে a = 1
• খ = আইডি নির্বাচকদের মোট সংখ্যা
• সি = ক্লাস, সিউডো-ক্লাস এবং অ্যাট্রিবিউট সিলেক্টারের সংখ্যা
• d = ধরণের নির্বাচক এবং সিউডো-উপাদান নির্বাচকগুলির সংখ্যা

এটি আরও বলা যায় যে আপনি প্রায়শই বেস -10 এ গণনা করতে পারেন তবে সমস্ত কলামের মান 10 এর চেয়ে কম হলেই হয়।

---

আপনার উদাহরণগুলিতে, আইডির মূল্য 100 পয়েন্ট নয়; প্রতিটি [0, 1, 0, 0]পয়েন্ট মূল্যবান । সুতরাং, একটি আইডি 15 ক্লাসকে বীট করে কারণ একটি উচ্চ-বেস নম্বর সিস্টেমের [0, 1, 0, 0]চেয়ে বেশি [0, 0, 15, 0]।

Answer 5

অলিম্পিক গেমসের পদক সারণির সাথে সুনির্দিষ্ট র‌্যাঙ্কিংয়ের তুলনা করার আমি খুব আগ্রহী (স্বর্ণের প্রথম পদ্ধতি - প্রথমে স্বর্ণপদকের সংখ্যা, তারপরে রৌপ্য এবং তারপরে ব্রোঞ্জের উপর ভিত্তি করে)।

এটি আপনার প্রশ্নের সাথেও কাজ করে (একটি নির্দিষ্ট গ্রুপে নির্বাচকদের বিশাল সংখ্যক)। বৈশিষ্ট্য পৃথকভাবে প্রতিটি গ্রুপ বিবেচনা। বাস্তব বিশ্বে আমি খুব কমই এক ডজনেরও বেশি নির্বাচকের সাথে কেস দেখেছি)।

এছাড়া বেশ ভাল নির্দিষ্টতা ক্যালকুলেটর পাওয়া যায় এখানে । আপনি নিজের উদাহরণটি রাখতে পারেন (# a এবং .a .b .c .d .e .f .g .h .i .j .k .l .m .n .o) এবং ফলাফলগুলি দেখুন।

রিওয়ের উদাহরণ 2016 অলিম্পিক গেমসের পদক সারণির মতো

Answer 6

আমি বিশ্বাস করি না যে ব্লগের ব্যাখ্যাটি সঠিক ছিল। নির্দিষ্টকরণ এখানে:

http://www.w3.org/TR/CSS2/cascade.html#specificity

ক্লাস সিলেক্টরের "পয়েন্টস" কোনও "আইডি" নির্বাচকের চেয়ে বেশি গুরুত্বপূর্ণ হতে পারে না। এটি ঠিক সেভাবে কাজ করে না।

Comments

আমি আমার উত্তরে বলেছি। ^^ তবে আপনার যদি একই ধরণের (উপাদান, শ্রেণি, আইডি) বেশি থাকে তবে এটি কোনও পার্থক্য করে। তবে এটি বেশ সুস্পষ্ট 5th

— Sphvn

স্পেসিফিকেশনের চারপাশে শব্দগুলি সম্ভবত CSS2 এবং CSS2.1 এর মধ্যে খুব বেশি পরিবর্তন হয়নি তবে ভবিষ্যতে আলোচনায় আপনার সত্যই সিএসএস 2.1 স্পষ্ট করা উচিত কারণ এটি সিএসএস 2 সম্পূর্ণ সুপারসিডিস যা মুক্তির পর্যায়ে সাধারণভাবে ভেঙেছিল।

— রবিন হুইলটন

Answer 7

আমি বলতে চাই যে:

Element < Class < ID

আমি মনে করি যে এটি কেবল যদি একাধিক হয় তবে আপনি কী পাবেন তার উপর নির্ভর করে তারা স্ট্যাক করে। সুতরাং কোনও শ্রেণি সর্বদা ক্লাসের উপরে উপাদান এবং আইডিটিকে সর্বদা প্রবাহিত করে তবে যদি এটি 4 টির মধ্যে নীচে থাকে যেখানে 3 নীল এবং 1 লাল হয় তবে এটি নীল হবে।

উদাহরণ স্বরূপ:

.a .b .c .d .e .f .g .h .i .j .k .l
{
color: red;
}

 .m .n .o
{
color blue;
}

লাল আউট করা উচিত।

উদাহরণ দেখুন http://jsfiddle.net/RWFWq/

"যদি 5 তমকে লাল বলে এবং 3 টি নীল ভাল বলে তবে ইমাম লাল হবে"