সিএসএস ক্লাসের ক্রম কীভাবে নির্দিষ্ট করবেন?

113

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

<html>
<head>
<style type="text/css">
    .extra {
        color: #00529B;
        border:1px solid #00529B; /* Blue */
        background-color: #BDE5F8;
    }

    .basic {
           border: 1px solid #ABABAB;
    }
</style>
</head>
<body>
    <input type="text" value="basic" class="basic"/>
    <input type="text" value="extra" class="extra"/>
    <input type="text" value="basic extra" class="basic extra"/>
    <input type="text" value="extra basic" class="extra basic"/>
</body>
</html>

আমি প্রত্যাশা করব, তৃতীয় উদাহরণ সহ class="basic extra"নীল সীমানা থাকা উচিত, যেহেতু অতিরিক্ত নির্দিষ্ট সীমানায় সীমাটি বেসিক থেকে ওভাররাইট করা হবে।

আমি উবুন্টু 9.04 এ এফএফ 3 ব্যবহার করছি

html css

— টিম বাথ
সূত্র

246

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

.myClass1 {color:red;}
.myClass2 {color:green;}

<div class="myClass2 myClass1">Text goes here</div>

স্নিপেট প্রসারিত করুন

এই পাঠ্যটি divপ্রদর্শিত হবে green, এবং না red; কারণ .myClass2সিএসএস সংজ্ঞা থেকে আরও নিচে রয়েছে .myClass1। আমি যদি classগুণাবলীতে শ্রেণীর নামের ক্রমটি পরিবর্তন করতে পারি তবে কিছুই পরিবর্তন হবে না।

— Zoidberg
সূত্র

14

আমি বুঝতে পারি না কেন তারা এটিকে এটি বাস্তবায়িত করবে। সিএসএস করতে পারে এমন বেশিরভাগ কাজের জন্য আমার মতামতও যথেষ্ট মজাদার।

— বাইসোর

@ কারণ নিয়ম ক্যাসকেডিং হয় । এগুলি উপরের থেকে নীচে, বাম থেকে ডানদিকে ফর্ম প্রয়োগ করে। আমাকে বোঝায়

— O-9

27

গুণাবলীর শ্রেণীর ক্রমটি অপ্রাসঙ্গিক। classবৈশিষ্ট্যের সমস্ত শ্রেণি উপাদানগুলিতে সমানভাবে প্রয়োগ করা হয়।

প্রশ্নটি হল: আপনার .css ফাইলে শৈলীর বিধিগুলি কোন ক্রমে উপস্থিত হয়। আপনার উদাহরণে, .basicপরে আসে .extraতাই .basicনিয়মগুলি যেখানেই সম্ভব অগ্রাধিকার গ্রহণ করবে।

যদি আপনি একটি তৃতীয় সম্ভাবনা সরবরাহ করতে চান (যেমন, এটি .basic কিন্তু যে .extraনিয়ম এখনও আবেদন করতে উচিত), আপনি অন্য বর্গ উদ্ভাবন, প্রয়োজন হবে .basic-extra, সম্ভবত যা স্পষ্টভাবে যে জন্য প্রদান করে।

— VoteyDisciple
সূত্র

3

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

[class$="extra"] {
  color: #00529B;
  border:1px solid #00529B;
  background-color: #BDE5F8;
}
[class$="basic"] {
  border: 1px solid #ABABAB;
}
input {display:block;}

<input type="text" value="basic" class="basic"/>
<input type="text" value="extra" class="extra"/>
<input type="text" value="basic extra" class="basic extra"/>
<input type="text" value="extra basic" class="extra basic"/>

স্নিপেট প্রসারিত করুন

— TravisV
সূত্র