කතුවරුන් :first-childක්රියා කරන ආකාරය වරදවා වටහා ගැනීම සඳහා මෙය වඩාත් ප්‍රසිද්ධ උදාහරණයකි . CSS2 හි හඳුන්වා දී ඇති :first-childව්‍යාජ පංතිය එහි මවුපියන්ගේ පළමු දරුවා නියෝජනය කරයි . ඒක තමයි. අනෙක් සංයුක්ත තේරීම් කාරක විසින් නිශ්චිතව දක්වා ඇති කොන්දේසි වලට ගැලපෙන පළමු ළමා මූලද්රව්යය කුමන එකක් දැයි එය ඉතා පොදු වැරදි මතයකි. තේරීම්කරුවන් වැඩ කරන ආකාරය නිසා ( පැහැදිලි කිරීමක් සඳහා මෙහි බලන්න ), එය සරලවම සත්‍ය නොවේ.
තේරීම් මට්ටම 3 :first-of-typeව්‍යාජ පන්තියක් හඳුන්වා දෙයි , එය එහි මූලද්රව්ය වර්ගයේ සහෝදර සහෝදරියන් අතර පළමු අංගය නියෝජනය කරයි. මෙම පිළිතුර නිදර්ශන සමඟ :first-childසහ අතර වෙනස පැහැදිලි කරයි :first-of-type. කෙසේ වෙතත්, මෙන් :first-child, එය වෙනත් කොන්දේසි හෝ ගුණාංග දෙස බලන්නේ නැත. HTML හි, මූලද්රව්ය වර්ගය ටැග් නාමයෙන් නිරූපණය කෙරේ. ප්රශ්නයේ දී, එම වර්ගය වේp .
අවාසනාවකට, දී ඇති :first-of-classපන්තියක පළමු ළමා අංගයට ගැලපීම සඳහා සමාන ව්‍යාජ පංතියක් නොමැත. එක සලසන වක් මගක් ලෙයා Verou මම (මුළුමනින්ම ස්වාධීනව වුවත්) මේ සඳහා සමග පැමිණි පළමු ඔබේ අපේක්ෂිත මෝස්තර අයදුම් කිරීමට ය සියලු පන්ති සමඟ ඔබේ මූලද්රව්ය:
/*
* Select all .red children of .home, including the first one,
* and give them a border.
*/
.home > .red {
border: 1px solid red;
}
... පසුව "අහෝසි" බව පන්තිය සමග අංග සඳහා මෝස්තර පළමු එක් අනුව එන්න භාවිතා පොදු සහෝදර සහෝදරියන් combinator~ උපදේශය පාලනයේ:
/*
* Select all but the first .red child of .home,
* and remove the border from the previous rule.
*/
.home > .red ~ .red {
border: none;
}
දැන් class="red"මායිමක් ඇත්තේ පළමු මූලද්රව්යය සමඟ පමණි .
නීති රීති ක්රියාත්මක කරන ආකාරය පිළිබඳ නිදර්ශනයක් මෙන්න:
<div class="home">
<span>blah</span> <!-- [1] -->
<p class="red">first</p> <!-- [2] -->
<p class="red">second</p> <!-- [3] -->
<p class="red">third</p> <!-- [3] -->
<p class="red">fourth</p> <!-- [3] -->
</div>
නීති රීති අදාළ නොවේ; දේශ සීමාවක් ඉදිරිපත් නොකෙරේ.
මෙම මූලද්රව්යයට පන්තිය නොමැත red, එබැවින් එය මඟ හැරී ඇත.
පළමු රීතිය පමණක් අදාළ වේ; රතු මායිමක් විදහා දක්වයි.
මෙම මූලද්රව්යයට පංතිය ඇත red, නමුත් එය redඑහි මවුපියන් තුළ පන්තිය සමඟ කිසිදු මූලද්රව්යයකට පෙර නොවේ . මේ අනුව දෙවන රීතිය අදාළ නොවේ, පළමු පමණක් වන අතර මූලද්රව්යය එහි මායිම තබා ගනී.
නීති දෙකම අදාළ වේ; දේශ සීමාවක් ඉදිරිපත් නොකෙරේ.
මෙම මූලද්රව්යයට පන්තිය redඇත. එය පංතිය සමඟ අවම වශයෙන් එක් මූලද්‍රව්‍යයකින්වත් පෙර redවේ. මේ අනුව නීති දෙකම ක්රියාත්මක වන අතර දෙවන borderප්‍රකාශය පළමුවැන්න අභිබවා යන අතර එමඟින් එය “අහෝසි” කරයි.
ප්රසාද ලෙස, එය තේරීම් 3 හඳුන්වා තිබුණත් සාමාන්ය සහෝදර සහෝදරියන් combinator සෑහෙන්න IE7 විසින් හොඳින් සහාය සහ නව ඇත, මෙන් නොව :first-of-typeහා:nth-of-type() පමණක් ගමන් IE9 සහාය දක්වයි. ඔබට හොඳ බ්‍රව්සර් සහාය අවශ්ය නම්, ඔබ වාසනාවන්තයි.
ඇත්ත වශයෙන්ම, මෙම තාක්‍ෂණයේ ඇති එකම වැදගත් අංගය වන්නේ සහෝදර සහෝදරියන් වන අතර එයට එවැනි පුදුමාකාර බ්‍රව්සර් ආධාරකයක් තිබීම මෙම තාක්ෂණය ඉතා විවිධාකාර කරයි - පන්ති තේරීම් කරුවන්ට අමතරව වෙනත් දේවලින් මූලද්රව්ය පෙරීම සඳහා ඔබට එය අනුවර්තනය කළ හැකිය:
:first-of-typeපංති තේරීම් කාරකයක් වෙනුවට වර්ග තේරීම් කාරකයක් සැපයීමෙන් ඔබට IE7 සහ IE8 හි වැඩ කිරීමට මෙය භාවිතා කළ හැකිය (නැවතත්, එහි වැරදි භාවිතය පිළිබඳ වැඩි විස්තර මෙහි පසු කොටසක):
article > p {
/* Apply styles to article > p:first-of-type, which may or may not be :first-child */
}
article > p ~ p {
/* Undo the above styles for every subsequent article > p */
}
පංති වෙනුවට ගුණාංග තේරීම් කරුවන්ට හෝ වෙනත් සරල තේරීම් කරුවන්ට ඔබට පෙරහන් කළ හැකිය .
ව්‍යාජ මූලද්රව්ය තාක්‍ෂණිකව සරල තේරීම්කරුවන් නොවුනත් ඔබට මෙම අතිච්ඡාදනය කිරීමේ තාක්ෂණය ව්‍යාජ මූලද්රව්ය සමඟ ඒකාබද්ධ කළ හැකිය .
මෙය ක්රියාත්මක වීමට නම්, ඔබේ අනෙක් සහෝදර සහෝදරියන් සඳහා පෙරනිමි මෝස්තර මොනවාදැයි ඔබ කල්තියා දැනගත යුතු අතර එවිට ඔබට පළමු රීතිය අභිබවා යා හැකිය. මීට අමතරව, CSS හි නීති රීති ඉක්මවා යාම මෙයට ඇතුළත් වන හෙයින්, ඔබට තේරීම් කාරක API හෝ සෙලේනියම් සමඟ භාවිතා කිරීම සඳහා තනි තේරීම්කරුවෙකු සමඟ එකම දේ සාක්ෂාත් කරගත නොහැක. හි CSS ලොකේටර් .
තේරීම්කරුවන් 4 විසින් අංකනය සඳහා දිගුවක්:nth-child() හඳුන්වා දෙන බව සඳහන් කිරීම වටී (මුලින් මුළුමනින්ම නව ව්‍යාජ පංතියක් ලෙස හැඳින්වේ :nth-match()), එය :nth-child(1 of .red)උපකල්පිතයක් වෙනුවට වෙනත් දෙයක් භාවිතා කිරීමට ඔබට ඉඩ සලසයි .red:first-of-class. සාපේක්ෂව මෑත කාලීන යෝජනාවක් වන බැවින්, නිෂ්පාදන ස්ථානවල එය භාවිතා කළ හැකි තරම් අන්තර් ක්‍රියාකාරී ක්රියාත්මක කිරීම් තවමත් නොමැත. මෙය ඉක්මනින් වෙනස් වනු ඇතැයි බලාපොරොත්තු වෙමු. මේ අතර, මම යෝජනා කළ වැඩමුළුව බොහෝ අවස්ථාවන් සඳහා වැඩ කළ යුතුය.
මෙම පිළිතුර උපකල්පනය කරන්නේ යම් පන්තියක් ඇති සෑම පළමු ළමා අංගයක් සඳහාම ප්‍රශ්නය සොයන බවයි. සමස්ත ලේඛනය පුරාම සංකීර්ණ තේරීම් කරුවෙකුගේ නවවන තරගය සඳහා ව්‍යාජ පංතියක් හෝ සාමාන්ය CSS විසඳුමක් හෝ නොමැත - විසඳුමක් තිබේද යන්න ලේඛන ව්යුහය මත බෙහෙවින් රඳා පවතී. jQuery සපයයි :eq(), :first, :lastහා වඩා මෙම අරමුණු ඉටු කර ගැනීම සඳහා, නමුත් එය නැවතත් සටහන් ඔවුන් වෙනස් ආකාරයකිනි ක්රියාත්මක :nth-child()et al . තේරීම් API භාවිතා කරමින්, ඔබට document.querySelector()පළමු තරගය ලබා ගැනීමට භාවිතා කළ හැකිය :
var first = document.querySelector('.home > .red');
හෝ document.querySelectorAll()කිසියම් නිශ්චිත ගැලපීමක් තෝරා ගැනීමට දර්ශකයක් සමඟ භාවිතා කරන්න:
var redElements = document.querySelectorAll('.home > .red');
var first = redElements[0];
var second = redElements[1];
// etc
නමුත් ෙම් .red:nth-of-type(1)වන විට මුල් පිළිගත් පිළිතුරු විසඳුමක් පිලිප් Daubmeier (මුලින් විසින් ලියන ලද ක්රියා මාටින් නමුත්, එතැන් සිට මකා දමන ලදී), එය ඔබ කිරීමට බලාපොරොත්තු වන්නේ කියලා මාර්ගය ලෙස හැසිරෙන්නේ නැත.
උදාහරණයක් ලෙස, ඔබට අවශ්ය pවූයේ ඔබේ මුල් සලකුණු තුළ පමණක් තෝරා ගැනීමට නම් :
<p class="red"></p>
<div class="red"></div>
... ඔබ භාවිතා කළ නොහැකි .red:first-of-type(සමාන .red:nth-of-type(1)එක් එක් මූලද්රව්යය පළමු (සහ පමණි) එහි වර්ගය එක් (නිසා) pහා divපිළිවෙළින්), එසේ යන දෙකම මෙම තේරීම් සම්පාත වනු ඇත.
කිසියම් පන්තියක පළමු මූලද්රව්යය ද එහි වර්ගයේ පළමු අංගය වන විට ව්‍යාජ පංතිය ක්රියා කරනු ඇත, නමුත් මෙය සිදුවන්නේ අහම්බෙන් පමණි . මෙම හැසිරීම පිලිප්ගේ පිළිතුරෙන් පෙන්නුම් කෙරේ. මෙම මූලද්රව්යයට පෙර ඔබ එකම වර්ගයේ මූලද්‍රව්‍යයක රැඳී සිටින මොහොතේදී, තේරීම් කාරකය අසමත් වේ. යාවත්කාලීන කළ සලකුණු කිරීම:
<div class="home">
<span>blah</span>
<p class="red">first</p>
<p class="red">second</p>
<p class="red">third</p>
<p class="red">fourth</p>
</div>
සමඟ රීතියක් යෙදීම සාර්ථක .red:first-of-typeවනු ඇත, නමුත් ඔබ pපන්තියෙන් තොරව තවත් එකක් එකතු කළ පසු:
<div class="home">
<span>blah</span>
<p>dummy</p>
<p class="red">first</p>
<p class="red">second</p>
<p class="red">third</p>
<p class="red">fourth</p>
</div>
... තේරීම වහාම අසමත් වනු ඇත, මන්ද පළමු .redමූලද්රව්යය දැන් දෙවන p මූලද්‍රව්‍යයයි.