আমি কীভাবে CSS উত্তরাধিকার রোধ করব?

Question 1

আমার আমার সাইডবারে একটি শ্রেণিবদ্ধ নেভিগেশন মেনু রয়েছে যা নেস্টেড তালিকাগুলি (<ul> এবং <li> ট্যাগ) ব্যবহার করে। আমি একটি প্রাক-তৈরি থিম ব্যবহার করছি যা ইতিমধ্যে তালিকার আইটেমগুলির জন্য স্টাইল রয়েছে তবে আমি শীর্ষ স্তরের আইটেমগুলির জন্য স্টাইলটি পরিবর্তন করতে চাই তবে তা উপ-আইটেমগুলিতে প্রযোজ্য নয়। শীর্ষ স্তরের তালিকার আইটেম ট্যাগটিতে শৈলগুলি বাচ্চাদের তালিকা আইটেমগুলিতে ক্যাসকেড না করেই কি স্টাইলগুলি প্রয়োগ করার সহজ উপায় আছে? আমি বুঝতে পারি যে আমি সাব-আইটেমগুলিতে স্পষ্টভাবে ওভাররাইডিং শৈলীগুলি যুক্ত করতে পারি তবে আমি "এই শ্রেণীর সাথে এই শৈলীগুলি প্রয়োগ করুন এবং ক্যাসকেড করবেন না" বলার কোনও সহজ উপায় যদি আছে তবে আমি সত্যিই সেই স্টাইলের কোডটির সদৃশ হওয়া এড়াতে চাই like এগুলি যে কোনও শিশুদের উপাদানগুলিতে নেমে যায় "। এইচটিএমএলটি আমি ব্যবহার করছি:

<ul id="sidebar">
  <li class="top-level-nav">
    <span>HEADING 1</span>
    <ul>
      <li>sub-heading A</li>
      <li>sub-heading B</li>
    </ul>
  </li>
  <li class="top-level-nav">
    <span>HEADING 2</span>
    <ul>
      <li>sub-heading A</li>
      <li>sub-heading B</li>
    </ul>
  </li>
</ul>

সুতরাং সিএসএসের স্টাইল রয়েছে #sidebar ulএবং #sidebar ul liইতিমধ্যে, তবে আমি #sidebar .top-level-navএটির অতিরিক্ত শৈলীগুলি যুক্ত করতে চাই যা এটির উপ-শিশুদের কাছে ক্যাসকেড না করে। এটি করার কোনও উপায় আছে বা আমার কী সমস্ত শৈলীর পুনরায় সাজানো দরকার তাই যে শৈলীগুলি ছিল #sidebar ulসেগুলি এখন নির্দিষ্ট ক্লাসের সাথে নির্দিষ্ট?

Question 2

এখনও কোনও প্যারেন্ট সিলেক্টর নেই (বা শন ইনমান তাদেরকে যোগ্য যোগ্য নির্বাচক হিসাবে ডেকেছেন ), সুতরাং পিতামাতাদের তালিকা আইটেমগুলিতে শৈলীগুলি ওভাররাইড করতে আপনাকে শিশু তালিকা আইটেমগুলিতে স্টাইল প্রয়োগ করতে হবে।

ক্যাসকেডিং হ'ল ক্যাসকেডিং স্টাইল শীটের পুরো পয়েন্টটি সাজানো, তাই নাম।

Question 3

আপনি হয় শিশু নির্বাচনকারী ব্যবহার করুন

তাই ব্যবহার

#parent > child

স্টাইলগুলি প্রয়োগ করতে কেবল প্রথম স্তরের শিশুদেরই তৈরি করবে। দুর্ভাগ্যক্রমে আই 6 শিশু নির্বাচনকারীকে সমর্থন করে না।

অন্যথায় আপনি ব্যবহার করতে পারেন

#parent child child

নীচে একাধিক স্তরের শিশুদের জন্য আরও একটি নির্দিষ্ট স্টাইল সেট করতে।

Question 4

CSS3 উত্তরাধিকার মডিউলে একটি সম্পত্তি বলা allহয়েছে । এটি এর মতো কাজ করে:

#sidebar ul li {
  all: initial;
}

২০১-12-১২ হিসাবে, সমস্ত ব্রাউজারগুলি আইই / এজ এবং অপেরা মিনি ছাড়া এই সম্পত্তিটিকে সমর্থন করে।

Question 5

চাইল্ড স্টাইলগুলি ডিফল্টরূপে পরিবর্তন করতে আপনি * নির্বাচক ব্যবহার করতে পারেন

উদাহরণ

#parent {
    white-space: pre-wrap;
}

#parent * {
    white-space: initial;
}

Question 6

Iframe দিয়ে মোড়ানো পিতামাতার সিএসএসকে অচল করে দেয়।

Question 7

সংক্ষিপ্ত উত্তর: না, CSS উত্তরাধিকার রোধ করা সম্ভব নয়। আপনি কেবল পিতামাতার উপর সেট করা স্টাইলগুলি ওভাররাইড করতে পারেন। অনুমান দেখুন:

এইচটিএমএল ডকুমেন্টের প্রতিটি উপাদান তার পিতামাতার কাছ থেকে মূল উপাদান ( html) ছাড়াই সমস্ত উত্তরাধিকার সূত্রে প্রাপ্ত হয় , যার কোনও পিতামাতা নেই। - ডাব্লু 3 সি

উত্তরাধিকার সূত্রে প্রাপ্ত প্রতিটি সম্পত্তিকে ছাড়িয়ে নেওয়া। আপনি initialকীওয়ার্ডও ব্যবহার করতে পারেন , যেমন color: initial;। এটি একসাথে ব্যবহার করা যেতে পারে all, যেমন all: initial;, যা একবারে সমস্ত বৈশিষ্ট্য পুনরায় সেট করবে। উদাহরণ:

.container {
  color: blue;
  font-style: italic;
}
.initial {
  all: initial;
}

<div class="container">
  The quick brown <span class="initial">fox</span> jumps over the lazy dog
</div>

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

আমি কি ব্যবহার করতে পারি সে অনুযায়ী ব্রাউজারের সমর্থন সারণীগুলি ...

all (বর্তমানে আইই এবং এজ উভয় ক্ষেত্রেই কোনও সমর্থন নেই, অন্যরা ভাল)
initial (বর্তমানে আইই তে কোনও সমর্থন নেই, অন্যরা ভাল)

আপনি কিছু ক্ষেত্রে সরাসরি বাচ্চাদের নির্বাচক> ব্যবহার করে এটি দরকারী মনে করতে পারেন । উদাহরণ:

.list > li {
  border: 1px solid red;
  color: blue;
}

<ul class="list">
  <li>
    <span>HEADING 1</span>
    <ul>
      <li>sub-heading A</li>
      <li>sub-heading B</li>
    </ul>
  </li>
  <li>
    <span>HEADING 2</span>
    <ul>
      <li>sub-heading A</li>
      <li>sub-heading B</li>
    </ul>
  </li>
</ul>

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

উত্তরাধিকারসূত্রে প্রাপ্ত সম্পত্তি <li>হিসাবে সীমানা শৈলী কেবল প্রত্যক্ষ বাচ্চাদের ক্ষেত্রেই প্রয়োগ করা হয়েছে border। colorউত্তরাধিকারসূত্রে প্রাপ্ত সম্পত্তি হিসাবে, তবে সমস্ত বাচ্চার ক্ষেত্রে পাঠ্যের রঙ প্রয়োগ করা হয়েছে ।

>উত্তরাধিকার রোধ করার ক্ষেত্রে , নির্বাচক কেবল উত্তরাধিকারসূত্রে প্রাপ্ত সম্পত্তিগুলির সাথেই কার্যকর হবে।

Question 8

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

Question 9

উদাহরণস্বরূপ, যদি আপনার এক্সএইচটিএমএল ডকুমেন্টে দুটি ডিভ থাকে।

<div id='div1'>
    <p>hello, how are you?</p>
    <div id='div2'>
        <p>I am fine, thank you.</p>
    </div>
</div>

তারপরে সিএসএসে এটি ব্যবহার করে দেখুন।

#div1 > #div2 > p{
    color: red;
}

কেবল 'Div2' অনুচ্ছেদে প্রভাবিত করুন।

#div1 > p {
    color: red;
}

কেবল 'Div1' অনুচ্ছেদে প্রভাবিত করুন।

Question 10

এর জন্য আপনার ক্লাসের রেফারেন্সের দরকার নেই li। পরিবর্তে সিএসএসের মতো

li.top-level-nav { color:black; }

তুমি লিখতে পারো

ul#sidebar > li { color:black; }

এটি কেবলমাত্র থেকে স্টাইলিং প্রযোজ্য হবে liগুলি করে অবিলম্বে সাইডবার থেকে নেমে ul।

Question 11

"#sidebar ul li" বাছাইকারীকে কেবল তাদের ডিফল্টগুলিতে ফিরিয়ে দিন