সিএসএস নির্বাচকদের মধ্যে '>' এবং একটি স্পেসের মধ্যে পার্থক্য কী?

126

এই সিনট্যাক্সটি ব্যবহার করে পয়েন্টটি কী

div.card > div.name

এই মধ্যে পার্থক্য কি

div.card div.name

css css-selectors

— র্যান্ডি মায়ার
সূত্র

এই প্রশ্নটি আরও, আমি যেমন অবগত ছিলাম না এবং আমার যে সমস্যাটি হচ্ছে তা সমাধান করার জন্য ব্যবহার করা যেতে পারে, কোন ব্রাউজারগুলি এই ধরণের নির্বাচককে সমর্থন করে?

— কাইল

3

এটি সমস্ত বর্তমান ব্রাউজারে সমর্থিত। IE সংস্করণ support: এমএসডিএন.মাইক্রোসফটকম

— ম্যাটি ভির্ককুনেন

210

A > B কেবলমাত্র বি কে নির্বাচন করবে যা এ এর সরাসরি বাচ্চা হয় (এটি অন্তর্গত অন্য কোনও উপাদান নেই)।

A B এগুলির মধ্যে থাকা যে কোনও বি নির্বাচন করবে, এমনকি যদি তাদের মধ্যে অন্যান্য উপাদান রয়েছে।

— মাত্তির বিড়ক্কুনেন
সূত্র

11

>হয় শিশু নির্বাচক। এটি কেবলমাত্র তাত্ক্ষণিকভাবে শিশু উপাদানগুলি নির্দিষ্ট করে এবং কোনও বংশধরকে নয় (নাতি-নাতনী, নাতি-নাতনী ইত্যাদি সহ) ব্যতীত দ্বিতীয় উদাহরণ হিসাবে >।

শিশু নির্বাচনকারী আইই 6 এবং তার চেয়ে কমের দ্বারা সমর্থিত নয়। একটি দুর্দান্ত সামঞ্জস্যতা টেবিল এখানে ।

— Pekka
সূত্র

2

div.card > div.nameমিলছে <div class='card'>....<div class='name'>xxx</div>...</div> কিন্তু মিলছে না<div class='card'>....<div class='foo'> ... <div class='name'>xxx</div>..</div>....</div>

div.card div.name দুজনের সাথেই মিলছে।

যে, >নির্বাচক নিশ্চিত করে তোলে যে ডানদিকে নির্বাচিত উপাদান >তার বাম দিকে উপাদান একটি প্রতিরোধী শিশু হয়।

এর বংশধর (কেবল একটি শিশু নয়) এর সাথে >মেলে না বাক্য গঠন ।<div class='name'><div class='card'>

— রেনে নেইফেনিগার
সূত্র

0

এ> বি এ এর সরাসরি সন্তান হলে বি কে নির্বাচন করে, অন্যদিকে এবি বি কে সরাসরি বাছাই করে বাছাই করে বাছাই করে।

<p> USING SPACE </p>

<style>
  .a .b {
    background-color: red;
  }
</style>

<span class="a">
  a
  <br>
  <span class="b"> a b</span>
  <br>

  <span class="c">
    <span class="b"> a b c</span>
  </span>
</span>

<br><br>
<p> USING GREATER THAN SIGN</p>

<style>
  .x > .y {
    background-color: red;
  }
</style>

<span class="x">
  x
  <br>
  <span class="y"> x y</span>
  <br>

  <span class="z">
    <span class="y"> x y z</span>
  </span>
</span>

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

— eozten
সূত্র

এখানে একটি কোড স্নিপেট আছে। আপনি এটি দেখতে পারেন কিনা আমি জানি না।

— eozten

ডেমোটি দুর্দান্ত তবে সত্য যে তথ্যের সাথে প্রশ্নের উত্তর দেয়; অন্যান্য তিনটি উত্তরে ইতিমধ্যে তথ্য। আজ যদি এই প্রশ্নটি জিজ্ঞাসা করা হত, তবে তা কার্যকর হবে তবে আপনি যদি> 8 বছরের পুরানো প্রশ্নটি এনক্রো করতে চলেছেন তবে এটি সত্যিই বাধ্যতামূলক কারণে হওয়া উচিত।

— টাইলার 18

0

> বনাম স্পেস

div > span { }বনাম দুটি পরিস্থিতি বিবেচনা করুন ।div span { }

এখানে, উপাদানটির <space>সমস্ত <span>উপাদান নির্বাচন করে <div>যদি তারা অন্য উপাদানের অভ্যন্তরে থাকে। >> <div>উপাদানটির সমস্ত বাচ্চাকে বাছাই করে তবে তারা অন্য উপাদানের ভিতরে থাকলে।

> (এর চেয়েও বড়):

div > span {
  color: #FFBA00 ;
}

<body>
  <div>

    <p>
      <span>Hello,</span>
    </p>

    <span>World!</span>
  </div>
</body>

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

এটি কেবলমাত্র নির্বাচন করে <span>World!</span>এবং এটি <span>অভ্যন্তরের <p>ট্যাগটির সন্ধান করবে না ।

স্থান

div span {
  color: #FFBA00 ;
}

<body>
  <div>
    <p>
      <span>Hello,</span>
    </p>

    <span>World!</span>
  </div>
<body>

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

এটি অন্য সমস্ত স্প্যান ট্যাগ নির্বাচন করে, এমনকি অন্য ট্যাগের ভিতরে বাসা বাঁধে।

— S.Goswami
সূত্র