CSS కంబైనర్స్
- పూర్వ పేజీ CSS అలిగ్న్
- తదుపరి పేజీ CSS 伪类
CSS కంబైనర్స్
కంబైనర్స్ సెలెక్టర్ల మధ్య సంబంధాన్ని గుర్తించే కొన్ని పద్ధతులు ఉన్నాయి.
CSS సెలెక్టర్స్ అన్ని సాధారణ సెలెక్టర్లను కలిగి ఉండవచ్చు. సాధారణ సెలెక్టర్ల మధ్యలో, మాత్రమే కంబైనర్స్ చేర్చవచ్చు.
CSS లో నాలుగు రకాల వివిధ కంబైనర్స్ ఉన్నాయి:
- అన్ని పరిణామాల సెలెక్టర్ (శుభ్రం)
- సంతాన సెలెక్టర్ (
>) - సమీప స్థాయి స్థాయి సెలెక్టర్ (
+) - ఉపయుక్త స్థాయి స్థాయి సెలెక్టర్ (
~)
అన్ని పరిణామాల సెలెక్టర్
అన్ని పరిణామాల సెలెక్టర్ ఉపయుక్త మూలకంతో అన్ని పరిణామాలను మ్యాచ్ చేస్తుంది.
ఈ ఉదాహరణలో, <div> మూలకంలోని అన్ని <p> మూలకాలను ఎంచుకొంటుంది:
ప్రత్యయం
div p {
background-color: yellow;
}
సంతాన సెలెక్టర్
సంతాన సెలెక్టర్ ఉపయుక్త మూలకంతో సంతాన మూలకాలను మ్యాచ్ చేస్తుంది.
ఈ ఉదాహరణలో, <div> మూలకంతో ఉన్న అన్ని <p> మూలకాలను ఎంచుకొంటుంది:
ప్రత్యయం
div > p {
background-color: yellow;
}
సమీప స్థాయి స్థాయి సెలెక్టర్
సమీప స్థాయి స్థాయి సెలెక్టర్ ఉపయుక్త మూలకంతో సమీప స్థాయి స్థాయి మూలకాలను మ్యాచ్ చేస్తుంది.
సమాన స్థాయి స్థాయి మూలకాలు అదే మూలకంతో ఉండాలి. "సమీపం" అంటే "తర్వాత ఉన్నది" అని అర్థం చేసుకోండి.
ఈ ఉదాహరణలో, <div> మూలకం తర్వాత అన్ని <p> మూలకాలను ఎంచుకొంటుంది:
ప్రత్యయం
div + p {
background-color: yellow;
}
ఉపయుక్త స్థాయి స్థాయి సెలెక్టర్
ఉపయుక్త స్థాయి స్థాయి సెలెక్టర్ ఉపయుక్త మూలకంతో సమాన స్థాయి పైన అన్ని మూలకాలను మ్యాచ్ చేస్తుంది.
ఈ ఉదాహరణలో, <div> మూలకంతో సమాన స్థాయి పైన అన్ని <p> మూలకాలను ఎంచుకొంటుంది:
ప్రత్యయం
div ~ p {
background-color: yellow;
}
అన్ని CSS కంబైనేషన్ సెలెక్టర్స్
| సెలెక్టర్ | ఉదాహరణ | ఉదాహరణ వివరణ |
|---|---|---|
| element element | div p | ప్రతి <div> మూలకంలోని అన్ని <p> మూలకాలను ఎంచుకొనుము. |
| element>element | div > p | 选择其父元素是 元素的所有 元素。 |
| element+element | div + p | 选择所有紧随 元素之后的 元素。 |
| element1~element2 | p ~ ul | ప్రతి <ul> ఎలిమెంట్లను <p> ఎలిమెంట్లు సహాయపడి ఎంచుకోండి. |
ప్రత్యేక వాచకాలు
అవార్డ్ బుక్:CSS డెసెండెంట్ సెలెక్టర్
అవార్డ్ బుక్:CSS చిల్డ్ సెలెక్టర్
అవార్డ్ బుక్:CSS అడ్జాసెంట్ సెలెక్టర్
- పూర్వ పేజీ CSS అలిగ్న్
- తదుపరి పేజీ CSS 伪类
