CSS డెరివేటివ్ సెలెక్టర్స్

派生选择器

通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。

CSS1 లో, ఈ విధంగా నియమాలను ఆపాదించే సెలెక్టర్స్ ను కాంటెక్స్యూవల్ సెలెక్టర్స్ (కాంటెక్స్యూవల్ సెలెక్టర్స్) అంటారు, ఎందుకంటే వాటికి కాంటెక్స్ట్యూవ్ కార్యకలాపం ఆధారపడి ఉన్నాయి. CSS2 లో, వాటిని డెరివేటివ్ సెలెక్టర్స్ అంటారు, కానీ ఎందుకంటే కానీ అవి అదే కార్యకలాపం ను చేస్తాయి.

డెరివేటివ్ సెలెక్టర్ మీరు డాక్యుమెంట్ యొక్క కాంటెక్స్ట్యూవ్స్ ను ఆధారంగా కొన్ని టాగ్ యొక్క స్టైల్స్ ని నిర్వచించడానికి అనుమతిస్తుంది. డెరివేటివ్ సెలెక్టర్స్ యొక్క వినియోగం ద్వారా, మీరు హెచ్ఎంఎల్ కోడ్ ను సరళంగా చేయవచ్చు.

ఉదాహరణకు, మీరు జాబితాలో ఉన్న strong కింద ఇటువంటి స్క్రూబిల్లుగా మారాలని కోరుకున్నారు అని సాధారణంగా స్క్రూబిల్లు అని అనుకుంటే ఒక డెరివేటివ్ సెలెక్టర్ నిర్వచించవచ్చు:

li strong {
    font-style: italic;
    font-weight: normal;
  }

మీరు స్ట్రాంగ్ గా ముద్రించబడిన నీలి కోడ్ యొక్క సందర్భాన్ని గమనించండి:

<p><strong>నేను క్లాస్ లో లేదు, అందువల్ల ఈ నియమం నా పట్ల చూడలేదు, అందువల్ల నేను ఇటువంటి స్క్రూబిల్లు లేదు</strong></p>
<ol>
<li><strong>నేను ఇటువంటి స్క్రూబిల్లు ఉన్నాను. ఇది ఇటువంటి li కింద ఉన్న strong కింద ఉండినందున ఉంది.</strong></li>
<li>నేను సాధారణ ఫంట్ ఉన్నాను.</li>
</ol>

ఈ ఉదాహరణలో, మాత్రమే li కింద ఉన్న strong కింద విన్యాసం ఇటువంటి స్క్రూబిల్లు అవసరం లేదు, ఎందుకంటే స్ట్రాంగ్ క్లాస్ లేదా ఐడి నిర్వచించకుండా కోడ్ సరళంగా ఉంటుంది.

再看看下面的 CSS 规则：

strong {
     color: red;
     }
h2 {
     color: red;
     }
h2 strong {
     color: blue;
     }

下面是它施加影响的 HTML：

<p>The strongly emphasized word in this paragraph is<strong>red</strong>.</p>
<h2>This subhead is also red.</h2>
<h2>ఈ ఉపశీర్షికలో బలమైనటువంటి పదం ఈ ఉపశీర్షికలో ఉంది:<strong>blue</strong>.</h2>

సంబంధిత కంటెంట్

డెరివేటివ్ సెలెక్టర్స్ గురించి మరింత తెలుసుకోవడానికి, CodeW3C.com అధునాతన ట్యూటోరియల్స్ యొక్క ఈ కింది విషయాలను చదవండి: