CSS అట్రిబ్యూట్ సెలెక్టర్ వివరణ

CSS 2 అనుబంధ లక్షణ సెలెక్టర్స్ ప్రవేశపెట్టింది.

అనుబంధ లక్షణం మరియు లక్షణం విలువ పై అనుబంధ లక్షణ సెలెక్టర్ ఉపయోగించవచ్చు.

సాధారణ లక్షణ సెలెక్టర్

లక్షణం కలిగిన అన్ని మూలకాలను ఎంపిక చేయాలి అని కోరుకున్నట్లయితే, లక్షణం విలువ లేకుండా సాధారణ లక్షణ సెలెక్టర్స్ ఉపయోగించవచ్చు.

ఉదాహరణ 1

ప్రశ్నల పై అన్ని లక్షణాలను ఎంపిక చేయాలి అని కోరుకున్నట్లయితే, అలా రాయవచ్చు:

*[title] {color:red;}

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

ఉదాహరణ 2

పైన అదే విధంగా, href లక్షణం కలిగిన అన్ని లింకులపై (a మూలకం) స్టైల్స్ ఆపివేయవచ్చు:

a[href] {color:red;}

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

例子 3

మరియు అనేక లక్షణాలపై ఎంపిక చేయవచ్చు, అందుకు లక్షణ సెలెక్టర్స్ ను కలిపివేయాలి.

例如，为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色，可以这样写：

a[href][title] {color:red;}

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

ఉదాహరణ 4

ఈ లక్షణాన్ని సృజనాత్మకంగా ఉపయోగించవచ్చు.

ఉదాహరణకు, అల్ట్ అమార్ట్ కలిగిన అన్ని చిత్రాలకు స్టైల్స్ అనువర్తించి, ఈ చిత్రాలను ప్రదర్శించవచ్చు:

img[alt] {border: 5px solid red;}

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

అనుష్టుపం:పైన మాట్లాడిన విధంగా, ఇది దానిని పరిశీలించడానికి ఉపయోగపడుతుంది, కానీ డిజైనింగ్ కోసం మరియు పరిశీలన కోసం ఉపయోగపడుతుంది కాదు, అది చిత్రాలను నిర్ధారించడానికి ఉపయోగపడుతుంది.

ఉదాహరణ 5: XML డాక్యుమెంటులకు అమార్ట్ ఎంపికకర్తలు ఉపయోగించడం

అమార్ట్ ఎంపికకర్తలు XML డాక్యుమెంటుల్లో చాలా ఉపయోగపడతాయి, ఎందుకంటే XML భాష అమార్ట్ ఎలిమెంట్లు మరియు అమార్ట్ అట్రిబ్యూట్లను వినియోగించడానికి మాట్లాడుతుంది.

మనం సూర్యసంహతి ప్రతిపాదికలను రూపొందించిన ఒక XML డాక్యుమెంటును సందర్శించామని మాట్లాడుతున్నాము. మనం మూన్స్ అమార్ట్ కలిగిన అన్ని planet ఎలిమెంట్లను ఎరుపు రంగులో చేయాలని కావచ్చు, అలా రాయాలి:

planet[moons] {color:red;}

ఈ కింద ముఖ్యమైన పరికళ్ళలో రెండవ మరియు మూడవ ఎలిమెంట్ల పదబంధాన్ని ఎరుపు రంగులో చేయడానికి ఇది ఉపయోగపడుతుంది, కానీ మొదటి ఎలిమెంట్ పదబంధం ఎరుపు రంగులో కాదు:

<planet>Venus</planet>
<planet moons="1">Earth</planet>
<planet moons="2">Mars</planet>

ఫలితాన్ని చూడండి

ప్రత్యేక అమార్ట్ అట్రిబ్యూట్ ప్రాయిజ్యం పై ఎంపికచేయడం

కొన్ని అమార్ట్ అట్రిబ్యూట్లను కలిగిన ఎలిమెంట్లను ఎంపికచేసే కారణంగా, మరింత స్పష్టంగా ఎంపికచేయవచ్చు, మరియు మాత్రమే ప్రత్యేక అమార్ట్ అట్రిబ్యూట్లను కలిగిన ఎలిమెంట్లను ఎంపికచేయవచ్చు.

ఉదాహరణ 1

ఉదాహరణకు, మీరు వెబ్ సర్వర్లో కొన్ని ప్రత్యేక డాక్యుమెంటులకు హైపర్ లింకును ఎరుపు రంగులో చేయాలని కావచ్చు, అలా రాయాలి:

a[href="http://www.codew3c.com/about_us.asp"] {color: red;}

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

ఉదాహరణ 2

సాధారణ అమార్ట్ ఎంపికకర్తలతో పోలిస్తే, పలు అమార్ట్ అట్రిబ్యూట్-వేల్ ఎంపికకర్తలను కలపడం ద్వారా ఒక డాక్యుమెంటును ఎంపికచేయవచ్చు.

a[href="http://www.codew3c.com/"][title="W3School"] {color: red;}

ఈ కింద ముఖ్యమైన పరికళ్ళలో మొదటి హైపర్ లింకును ఎరుపు రంగులో చేయడానికి ఇది ఉపయోగపడుతుంది, కానీ రెండవ లేదా మూడవ లింకులు ప్రభావితం కాదు:

<a href="http://www.codew3c.com/" title="W3School">W3School</a>
<a href="http://www.codew3c.com/css/" title="CSS">CSS</a>
<a href="http://www.codew3c.com/html/" title="HTML">HTML</a>

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

例子 3

同样地，XML 语言也可以利用这种方法来设置样式。

మరియు ప్రపంచం యొక్క ఉదాహరణలో మళ్ళీ చర్చించండి. మీరు మొదటి ప్రపంచం యొక్క moons అట్రిబ్యూట్ విలువను 1 కాబోతే అనే ప్రపంచం యొక్క ముఖ్యమైన ప్రపంచాలను ఎంచుకోవాలని చూడండి:

planet[moons="1"] {color: red;}

ఈ కోడు క్రింది ముద్రలలో రెండవ ముద్రను ఎరుపు రంగులో చేస్తుంది, మొదటి మరియు మూడవ ముద్రలు ప్రభావితం కాకుండా ఉంటాయి:

<planet>Venus</planet>
<planet moons="1">Earth</planet>
<planet moons="2">Mars</planet>

ఫలితాన్ని చూడండి

అట్రిబ్యూట్ మరియు అట్రిబ్యూట్ విలువ పూర్తిగా సరిపోవాలి

ఈ ఫార్మాట్ కు అట్రిబ్యూట్ విలువలో పూర్తి సరిపోలు అవసరం.

అట్రిబ్యూట్ విలువలో అంతరాయంతో విలువలు కలిగిన అట్రిబ్యూట్లో మొత్తం ముగింపు ఉంటే, అప్పుడు అది ప్రతిపాదించబడిన అట్రిబ్యూట్లో సరిపోలు అవసరం.

ఈ పేరులో చూడండి:

<p class="important warning">This paragraph is a very important warning.</p>

ముఖ్యమైన పేరును ఎంచుకోవడానికి p[class="important"] రూపంలో రాయడం వలన, ఈ నియమం ప్రమాణం చివరి ముఖ్యమైన పేరును ఎంచుకోకుండా ఉంటుంది.

కొన్ని అట్రిబ్యూట్ విలువను ఎంచుకోవడానికి, కొన్ని రూపంలో రాయవచ్చు:

p[class="important warning"] {color: red;}

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

పార్టియల్ అట్రిబ్యూట్ సెలెక్టర్ యొక్క ఉపయోగం

అట్రిబ్యూట్ విలువలోని పదాల జాబితాలో కొన్ని పదాన్ని ఎంచుకోవడానికి, వాయువు సంకేతాన్ని వాడవచ్చు కాబోతోంది.

మీరు class అట్రిబ్యూట్ లో important ఉన్న ముఖ్యమైన ఎల్లా ముఖ్యమైన అంశాలను ఎంచుకోవడానికి ఈ సెలెక్టర్ వాడవచ్చు:

p[class~="important"] {color: red;}

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

అంటే, వాయువు సంకేతాన్ని మించినట్లయితే, పూర్తి విలువ సరిపోలు అవసరం.

పార్టియల్ అట్రిబ్యూట్ సెలెక్టర్ మరియు పాయింట్ క్లాస్ నామకరణం యొక్క తేడా

ఈ సెలెక్టర్ మాటలో చర్చించిన క్లాస్ సెలెక్టర్ లో చివరి మెట్కా నామకరణం కి సమానంగా ఉంటుంది.

అంటే, p.important మరియు p[class="important"] HTML పత్రానికి సమానంగా వస్తాయి.

ఎందుకు "~=" అట్రిబ్యూట్ సెలెక్టర్ ఉంది? అది కేవలం class కాక ఏ అట్రిబ్యూట్ కు వాడవచ్చు కాబోతోంది.

ఉదాహరణకు, చాలా చిత్రాలు కలిగిన పత్రంలో కొన్ని మాత్రమే చిత్రాలు ఉంటాయి. ఈ కొన్ని చిత్రాలను ఎంచుకోవడానికి, title పత్రం యొక్క పార్టియల్ అట్రిబ్యూట్ సెలెక్టర్ వాడవచ్చు:

img[title~="Figure"] {border: 1px solid gray;}

这个规则会选择 title 文本包含 "Figure" 的所有图像。没有 title 属性或者 title 属性中不包含 "Figure" 的图像都不会匹配。

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

పార్ట్ వాల్యూ ఎంపిక సూచికలు

మీరుకు మరింత ప్రావీణ్యం కలిగిన ఎంపిక సూచిక మోడ్యూల్ను ఇప్పుడు పరిచయం చేస్తాము. ఇది CSS2 ముగిసిన తర్వాత విడుదలైనది మరియు మరిన్ని పార్ట్ వాల్యూ ఎంపిక సూచికలను కలిగి ఉంది. ప్రామాణికంగా అని పిలుస్తారు ప్రకారం, ఇది "పార్ట్ వాల్యూ ఎంపిక సూచికలు" అని పిలువబడుతుంది.

అనేక ఆధునిక బ్రౌజర్లు ఈ ఎంపిక సూచికలను మద్దతు ఇస్తాయి, ఇక్కడ ఆయిఏ7 కూడా.

ఈ ఎంపిక సూచికలకు సరళ సమీక్ష క్రింది పట్టికలో ఉంది:

రకం 描述
[abc^="def"] abc అమృత విలువ ప్రారంభంలో "def" ఉన్న అన్ని మూలకాలను ఎంపిక చేయండి
[abc$="def"] abc అమృత విలువ చివరిన పై "def" ఉన్న అన్ని మూలకాలను ఎంపిక చేయండి
[abc*="def"] abc అమృత విలువలో "def" ఉన్న అన్ని మూలకాలను ఎంపిక చేయండి

ఈ ఎంపికలు అనేక ఉపయోగాలు కలిగి ఉన్నాయి.

ఉదాహరణకు, కోడ్వైత్త్స్ కం కు లింకులను స్టైల్స్ అనువర్తించడానికి అన్ని ఈ లింకులకు class నిర్దేశించడానికి మరియు ఆ క్లాస్ పై స్టైల్స్ రాయడానికి లేదు. బదులుగా, క్రింది నియమాన్ని రాయవచ్చు:

a[href*="codew3c.com"] {color: red;}

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

అనుష్టుపం:ఏ అమృతంను ఈ ఎంపిక సూచికలు ఉపయోగించవచ్చు.

ప్రత్యేక అమృత ఎంపిక రకం

ఇప్పుడు, ప్రత్యేక అమృత ఎంపిక సూచికను మీరుకు పరిచయం చేస్తాము. క్రింది ఉదాహరణను చూడండి:

*[lang|="en"] {color: red;}

ఈ నియమం లాంగ్ అమృతం వాల్యూను en లేదా en- ప్రారంభించే అన్ని మూలకాలను ఎంపిక చేస్తుంది. అందువల్ల, క్రింది సమానానికి మూడు మూలకాలు ఎంపిక చేయబడతాయి, అయితే చివరి రెండు మూలకాలు ఎంపిక చేయబడవు:

<p lang="en">Hello!</p>
<p lang="en-us">Greetings!</p>
<p lang="en-<p lang="au">G'day!</p>
<p lang="fr">Bonjour!</p>
<p lang="cy-en">Jrooana!</p>

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

సాధారణంగా, [att|="val"] ఏ అమృతం మరియు విలువకు ఉపయోగించబడవచ్చు.

ఒక HTML డాక్యుమెంట్లో అనేక చిత్రాలు ఉన్నాయి, ప్రతి చిత్రం ఫైల్ పేరు ఈ విధంగా ఉంటుంది అని భావించండి: figure-1.jpg మరియు figure-2.jpgఈ మేరకు అన్ని ఈ చిత్రాలను ముద్దుపరచడానికి క్రింది సూచికను ఉపయోగించవచ్చు:

img[src|="figure"] {border: 1px solid gray;}

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

అయితే, ఈ అమృత ఎంపిక సూచికకు అత్యంత సాధారణ ఉపయోగం భాషా విలువను ముద్దుపరచడం ఉంది.

CSS 选择器参考手册

选择器 描述
[attribute] 用于选取带有指定属性的元素。
[attribute=value] 用于选取带有指定属性和值的元素。
[attribute~=value] 用于选取属性值中包含指定词汇的元素。
[attribute|=value] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value] 匹配属性值以指定值开头的每个元素。
[attribute$=value] 匹配属性值以指定值结尾的每个元素。
[attribute*=value] పేరువాణి లో పేరును కలిగిన ప్రతి అంశాన్ని సరిపోల్చుతుంది.