CSS డీసెండెంట్ సెలెక్టర్

వారసత్వ సెలెక్టర్ (descendant selector) అని కలిపి పద్ధతి అని పిలుస్తారు.

后代选择器可以选择作为某元素后代的元素。

根据上下文选择元素

我们可以定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用。

ఉదాహరణకు, మీరు మాత్రమే h1 పద్ధతిని ఉన్న em పద్ధతులను షేయిల్స్ చేయాలి అయితే, ఈ పద్ధతిని వ్రాయవచ్చు:

h1 em {color:red;}

ఈ నియమం హెచ్ఎం ఎల్ పద్ధతిని ఉన్న పరిణామ ఎంపికరుతిని ఉన్న ఏదైనా em అంతర్భాగానికి రెడ్ రంగును చేస్తుంది. ఇతర em పద్ధతులు (వారు పేరాంకేట్రాన్ని లేదా బ్లాక్ క్వోటేషన్స్ లో ఉన్నాయి) ఈ నియమాన్ని ఎంపిక చేయబడలేరు:

<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>

స్వయంగా ప్రయత్నించండి

కానీ, h1 లో ప్రతి ఒక్క em అంతర్భాగానికి క్లాస్ అంతర్భాగాన్ని పెట్టవచ్చు, కానీ పరిణామ ఎంపికరుతిని ఉపయోగించడం సరిగ్గా మంచి మార్గం ఉంది.

సంజ్ఞాల వివరణ

పరిణామ ఎంపికలో, షేయిల్స్ లోని ఎడమ మూలలో రెండు లేదా మరిన్ని ఎంపికరుతులను స్పేస్ తో వేరు చేయబడి ఉంటాయి. ఎంపికరుతుల మధ్య స్పేస్ ఒక సంయోజకం ఉంటుంది. ప్రతి స్పేస్ సంయోజకంని '... లో ... విజయం', '... లో భాగంగా ...', '... లో పరిణామం ...' అని అర్థం చేసుకోవచ్చు, కానీ ఎంపికరుతిని కుడి నుండి ఎడమకు చదివితే ఉండాలి.

అలాగే, h1 em ఎంపికరుతిని 'హెచ్ఎం ఎల్ లో హెచ్ఎం ఎల్ పద్ధతిని ఉన్న ఏదైనా em అంతర్భాగాన్ని ఎంపిక చేస్తుంది' అని అర్థం చేసుకోవచ్చు. ఎంపికరుతిని ఎడమ నుండి కుడికి చదివితే, ఈ పద్ధతిని మార్చవచ్చు: 'ఎంపికరుతిని కలిగిన అన్ని h1 లో ఈ షేయిల్స్ ను em ప్రయోగిస్తారు'.

ప్రత్యేక అనువర్తనం

పరిణామ ఎంపిక అత్యంత శక్తివంతమైనది. దానితో, హెచ్ఎంఎల్ లో అసాధ్యమైన పనులను సాధ్యం చేయవచ్చు.

ఒక డాక్యుమెంట్ ఉంది, దానిలో ఒక సైడ్బార్ మరియు ఒక ముఖ్య ప్రాంతం ఉన్నాయి. సైడ్బార్ బ్యాక్గ్రౌండ్ నీలం ఉంది, ముఖ్య ప్రాంతం బ్యాక్గ్రౌండ్ తెలుపు ఉంది. ఈ రెండు ప్రాంతాలు దానిలో లింకుల జాబితాలను కలిగి ఉన్నాయి. అన్ని లింకులను నీలంగా చేయకూడదు, అలా చేసితే సైడ్బార్ లోని నీలం లింకులు చూడలేరు.

పరిష్కారం పెరిగిన వానర్ ఎంపిక ఉపయోగించడం ఉంది. ఈ సందర్భంలో, సైడ్బార్ ఉన్న డివ్ కు సైడ్బార్ అనే క్లాస్ అంతర్భాగాన్ని నిర్దేశించి, ముఖ్య ప్రాంతం క్లాస్ అంతర్భాగాన్ని maincontent గా నిర్దేశించండి. తరువాత ఈ షేయిల్స్ రాయండి:

div.sidebar {background:blue;}
div.maincontent {background:white;}
div.sidebar a:link {color:white;}
div.maincontent a:link {color:blue;}

有关后代选择器有一个易被忽视的方面，即两个元素之间的层次间隔可以是无限的。

例如，如果写作 ul em，这个语法就会选择从 ul 元素继承的所有 em 元素，而不论 em 的嵌套层次多深。

ఈ కింద ఉన్న పేజీలలో ul em అనేది అన్ని em అంశాలను ఎంచుకుంటుంది:

<ul>
  <li>జాబితా అంశం 1</li>
    <ol>
      <li>జాబితా అంశం 1-1</li>
      <li>జాబితా అంశం 1-2</li>
      <li>జాబితా అంశం 1-3</li>
        <ol>
          <li>జాబితా అంశం 1-3-1</li>
          <li>జాబితా అంశం</li> <em>1-3-2</em></li>
          <li>జాబితా అంశం 1-3-3</li>
        </ol>
      </li>
      <li>జాబితా అంశం 1-4</li>
    </ol>
  </li>
  <li>జాబితా అంశం 2</li>
  <li>జాబితా అంశం 3</li>
</ul>

స్వయంగా ప్రయత్నించండి