সিএসএস চাইল্ড বনাম বংশোদ্ভূত নির্বাচকরা

Question

আমি এই 2 নির্বাচকদের মধ্যে কিছুটা বিভ্রান্ত।

বংশধর নির্বাচক কি :

div p

এটি একটি তাত্ক্ষণিক পূর্ববর্তী বা না না সমস্ত pমধ্যে নির্বাচন করুন divসুতরাং pঅন্যটির ভিতরে থাকলে divএটি এখনও নির্বাচিত হবে?

তারপরে শিশু নির্বাচনকারী:

div > p

পার্থক্য কি? কোনও সন্তানের অর্থ কী তাৎক্ষণিক শিশু? যেমন।

<div><p>

বনাম

<div><div><p>

উভয়ই নির্বাচিত হবে, না?

Comments

আমি এখানে বিস্তারিতভাবে ব্যাখ্যা করার চেষ্টা করেছি , কারও পক্ষে যদি এটির সহায়ক হয় তবে কেবলমাত্র যদি তা উল্লেখ করতে পারে ...

— মিঃ এলিয়েন

Answer 1

"শিশু" এবং "বংশধর" শব্দের অর্থ ইংরেজীতে কী বোঝায়:

• আমার মেয়ে আমার সন্তান এবং আমার বংশধর
• আমার নাতনি আমার সন্তান নয়, তিনি আমার বংশধর।

Comments

একটি গুরুত্বপূর্ণ দ্রষ্টব্য হ'ল একটি শিশু নির্বাচক বংশধর নির্বাচকের তুলনায় দ্রুত হতে চলেছে, যা 1000 এর DOM উপাদানগুলির সাথে পৃষ্ঠাগুলিতে দৃশ্যমান প্রভাব ফেলতে পারে।

— জেক উইলসন

ভাল উত্তর, তবে আমি প্রশ্নের মধ্যে তাঁর উদাহরণগুলির সরাসরি উত্তরগুলি জুড়ে দেব - এটি হাস্যকরভাবে পরিষ্কার করার জন্য।

— জোকুল

Answer 2

হ্যাঁ আপনি সঠিক. div pনিম্নলিখিত উদাহরণের সাথে মিলবে তবে তা মিলবে div > pনা।

<div><table><tr><td><p> <!...

প্রথমটির নাম বংশধর নির্বাচক এবং দ্বিতীয়জনকে শিশু নির্বাচক বলা হয় ।

Answer 3

Bascailly, " AB " নির্বাচন সব খ এর একটি ভিতরে যেখানে " একটি> খ " নির্বাচন এর খ কি কেবল সন্তান একটি , এটি নির্বাচন করুন করবে না খ কি সন্তান খ সন্তান কি একটি ।

এই উদাহরণ পার্থক্য চিত্রিত:

div span{background:red}
div>span{background:green}

<div><span>abc</span><span>def<span>ghi</span></span></div>

এর পটভূমির রঙ এবিসি এবং Def সবুজ হবে, কিন্তু GHI লাল পটভূমির রঙ থাকবে।

গুরুত্বপূর্ণ: আপনি যদি নিয়মের ক্রমটি এতে পরিবর্তন করেন:

div>span{background:green}
div span{background:red}

সমস্ত বর্ণগুলিতে লাল ব্যাকগ্রাউন্ড থাকবে কারণ বংশধর নির্বাচক বাচ্চাকেও পছন্দ করে।

Comments

আপনার যোগ করা "গুরুত্বপূর্ণ" বিভাগটি এই উত্তরটি সম্পূর্ণ করে। ধন্যবাদ!

— আকাশ ভার্মা

Answer 4

তত্ত্ব অনুসারে: শিশু => পূর্বপুরুষের তাত্ক্ষণিক বংশধর (যেমন জো এবং তার বাবা)

অবতীর্ণ => যে কোনও উপাদান যা কোনও নির্দিষ্ট পূর্বপুরুষের (যেমন জো ও তাঁর মহান-পিতামহ)

অনুশীলনে: এই এইচটিএমএল চেষ্টা করুন:

<div class="one">
  <span>Span 1.
    <span>Span 2.</span>
  </span>
</div>

<div class="two">
  <span>Span 1.
    <span>Span 2.</span>
  </span>
</div>

এই সিএসএস সহ:

span { color: red; } 
div.one span { color: blue; } 
div.two > span { color: green; }

http://jsfiddle.net/X343c/1/

Comments

আপনি কোন ব্রাউজারটিতে এটি পরীক্ষা করেছেন তা আকর্ষণীয়, যেহেতু এটি সত্যই কাজ করে বলে মনে হচ্ছে

— yoel halb

জবাবদিহি এফওয়াইআই, সিএসএস জেএসফিডেলের সিএসএসের সাথে মেলে না ( redএবং blueঅদলবদল হয়েছে)।

— পাং

Answer 5

শিশু নির্বাচনকারী ইন্টারনেট এক্সপ্লোরার 6. এ সমর্থিত নয় সে বিষয়ে সচেতন থাকুন (আপনি যদি স্টাইল শিটের পরিবর্তে কোনও jQuery / প্রোটোটাইপ / YUI ইত্যাদিতে নির্বাচক ব্যবহার করেন তবে এটি এখনও কার্যকর হয়)

Comments

আমি ভাবছি আমি সিএসএসে এটি ব্যবহার করি কিন্তু jQuery আমি সনাক্ত যদি ব্রাউজার IE6 আছে (jQuery আমি এটা করতে পারেন অথবা আমি ব্যবহার করতে হবে? <! - [যদি আই ই 6]>) এবং একটি ক্লাস যোগ

— iceangel89

ব্রাউজারের স্নিফিংয়ের পরিবর্তে jquery ফিচার স্নিফিংয়ের কাজ করে তাই ব্রাউজারটি আই 6 হয় তবে আপনি সনাক্ত করতে পারবেন বলে আমি মনে করি না। এবং আপনি করা উচিত নয়। সর্বোত্তম জিনিসটি হ'ল আপনি বর্ণিত মত শর্তাধীন মন্তব্য সহ ie6 এর জন্য একটি অতিরিক্ত স্টাইল শীট অন্তর্ভুক্ত করা।

— rlovtang

Answer 6

ডিভ পি 

সমস্ত 'পি' উপাদান নির্বাচন করে যেখানে পিতামাতার একটি 'ডিভ' উপাদান রয়েছে

ডিভ> পি

এর অর্থ তাত্ক্ষণিক শিশুরা সমস্ত 'পি' উপাদান নির্বাচন করে যেখানে পিতামাতার একটি 'ডিভ' উপাদান রয়েছে

Answer 7

সিএসএস নির্বাচন এবং কোনও নির্দিষ্ট উপাদানকে স্টাইল প্রয়োগ করা ডোম উপাদানটির মাধ্যমে ট্র্যাভার্সিংয়ের মাধ্যমে করা যেতে পারে [উদাহরণস্বরূপ

উদাহরণ

.a .b .c .d{
    background: #bdbdbd;
}
div>div>div>div:last-child{
    background: red;
}

<div class='a'>The first paragraph.
 <div class='b'>The second paragraph.
  <div class='c'>The third paragraph.
   <div class='d'>The fourth paragraph.</div>
   <div class='e'>The fourth paragraph.</div>
  </div>
 </div>
</div>