Jūs galite pasiekti taip vadinamus vaikinius elementus. Tai yra tokie elementai, kurie yra tiesiogiai subordinuoti kitiems elementams. Tai gali skambėti šiek tiek abstrakčiai, tačiau tai gražiai paaiškinama pavyzdžiu.
<body> <p>Ištrauka 1</p> <p>Ištrauka 2</p> <p>Ištrauka 3</p> </body>
Čia body yra tevinių elementų dalis. p elementai kiekvienas yra body vaikiniai elementai. Turint šią žinutę, galima pritaikyti vaikinių elementų selektorius.
body>p {
spalva: mėlyna;
}
Ši sintaksė nustato, kad visos ištraukos, kurios yra tiesioginiai body vaikiniai, bus nudažytos mėlyna spalva.
Pavyzdys parašytai kodui dar kartą pabrėžia skirtumus tarp dviejų nurodymų body p ir body>p.
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
body>p {
šriftas:"Courier New", Courier, monospace;
šrifto dydis: 200%;
}
body p {
spalva:#0066FF;
}
</style>
</head>
<body>
<p>Ištrauka 1</p>
<p>Ištrauka 2</p>
<p>Ištrauka 3</p>
<div>
<p>Ištrauka 4</p>
</div>
</body>
</html>Pirmieji trys apibrėžti p-tekstiniai ištraukos yra tiesioginiai body vaikai. Nurodymas body p priskiria mėlyną spalvą visoms tekstinių ištraukų kategorijoms. Tuo tarpu body>p veikia tik pirmiesiems trims tekstiniams ištraukoms. Todėl šios ištraukos taip pat rodomos didesniu stygu.
Kituose elementuose norėčiau jums pristatyti sekimo elemento selektorių. Šis selektorius pažymi elementą, kuris iš karto seka po kito elemento ir turi tą patį tevinius elementą. Vėlgi, pavyzdys:
h1+p {
spalva: mėlyna;
}
Naudodamas šią sintaksę, teksto spalva nustatoma mėlyna. Tačiau tai galioja tik tuo atveju, jei ištrauka tiesiogiai seka po pirmo rūšies antraštės.
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
h1+p {
spalva: mėlyna;
}
</style>
</head>
<body>
<h1>Antraštė</h1>
<p>Ištrauka 1</p>
<h2>Antraštė</h2>
<p>Ištrauka 2</p>
<p>Ištrauka 3</p>
<div>
<p>Ištrauka 4</p>
</div>
</body>
</html>Pamatykite naršyklėje gautus rezultatus.
Tik pirmoji ištrauka bus rodoma mėlynai. Kiti ištraukos yra juodos. Tai dėl to, kad šie p elementai neseka h1, o tęsiasi nuo h2.
Dėl sekimo elementų, CSS3, beje, įvedė papildomų galimybių. Tuo tarpu dabar galima pasiekti visus tam tikros elemento sekimo elementus. Pavyzdys:
h1~p {
spalva: raudona;
}
Naudodama šią sintaksę visos ištraukos, kurios seka po h1, yra pasiekiamos.
Beje, ne tik galima tiesiogiai pasiekti elementus, bet taip pat būtina pasiekti elementų atributus.
Čia yra keletas šių selektorių:
• [att] – Elementas turi turėti tik atributą. Ar nurodomas vertė, nesvarbu.
• a[href] – Pažymimi visi hiperlinkai (<a href=…>). Tačiau tai netaikoma surikiavimo apibrėžimams (<a name=…>).
• [align=left] – Pažymi visus elementus, kurių atributas align turi vertę kairėje pusėje.
• [attr~=wert] – Pažymi visus elementus, kuriuose wert yra patiekinamų reikšmių sąraše, kurį skiria tarpai.
• [attr|=wert] – Pažymi elementą, jei nurodyta vertė atributo prasideda šnipščio riboje esančios eilutės pradžioje.
• img[width="200"] – Čia pažymimi visi paveikslėliai, kurie turi plotį 200 pikselių.
Žinoma, svarbu pastebėti, kada iš tikrųjų galėtumėte prireikti šių atributų selektorių. Pavyzdžiui, įsivaizduokite formą su jose nurodytomis žymimaisios varnelėmis. Varnelės - kaip jūs dabar žinote - apibrėžtos per įvesties elementą. Problemą čia sukelia tai, kad įvesties elementas naudojamas ir paprastoms teksto įvedimo laukams apibrėžti. Taigi, naudodami įvestį negalite taikyti skirtingų formatavimo stilių varnelei ir teksto įvedimo laukams. Būtent šiame taške reikia atributų selektorių. Norint geriau suprasti jų veikimą, pažiūrėkite į šį pavyzdį:
<body> Vardas: <input type="text" id="name" /> <br /> Vyras: <input type="checkbox" name="lytis" id="lytis" /> <br /> Moteris: <input type="checkbox" name="lytis" id="lytis" /> </body>
Čia buvo apibrėžti skirtingi formos elementai.
• vienas teksto įvedimo laukas
• du žymimieji varnelės
Šie laukai turėtų būti formatuoti.
input {
border:3px solid #000;
width: 10em;
}Laukams priskiriamas rėmelis ir plotis.
Problema yra ta, kad nustatytas plotis turėtų būti pritaikytas tik teksto įvedimo laukui, bet ne žymučiams. Tačiau su elementų selektoriumi čia nėra galimybės skirti skirtingas lauko rūšis. Kad būtų galima atlikti tokį skirtumą, pasirenkami atributų selektoriai. Štai pavyzdys, kaip tai galėtų atrodyti:
input[type="checkbox"] {
width: auto;
}
Iš tikrųjų šiuo selektoriu veikiamos tik tos input elementų, kurie turi atributų-reikšmių porą type="checkbox".
Pakartojimai
Dabar CSS galiausiai yra galimybė ginti pasikartojimus. Aišku, kyla klausimas, kam tai gali būti naudinga. Tokie selektoriai yra prasmingi, pvz., kai norite, kad kiekvienas antras lentelės eilutės būtų skirtingo spalvos. Kol aš pateiksiu turimus selektorius, štai labai tipiškas pavyzdys:
<ol id="kalbos">
<li>HTML</li>
<li>HTML5</li>
<li>CSS</li>
<li>CSS3</li>
<li>JavaScript</li>
<li>JScript</li>
<li>Java</li>
<li>PHP</li>
<li>Python</li>
</ol>
Čia yra paprastas sąrašas. CSS šiuo atveju kiekvienai trečiai sąrašo elementui norima priskirti fono spalvą.
Vartojamas selektorius nth-child(). Šiuo selektoriumi yra pakreiptas kiekvienas n-toji vaikų elementas.
#kalbos li:nth-child(3n) {
background-color: red;
}
Yra pasiekiami šie selektoriai:
• :root – Naudojant šį selektorių, galima pasiekti dokumento šaknį.
• :nth-child(n) – Valdo kiekvieną n-tojo elemento įgaliotąjį elementą. Šis selektorius ypač naudingas, kai reikia skirtingai suprojektuoti keletą elementų. n yra fiksuotas raktinis žodis, prie kurio galima taikyti skaičiavimus. N galima lyginti su 1.
• :nth-last-child(n) – Valdo kiekvieną n-tojo elemento elementą, kai vaikų elementai yra praeityje.
• :nth-of-type(n)– Valdo kiekvieną n-tojo HTML tipo elemento toje pačioje lygioje.
• :nth-last-of-type(n) – Valdo kiekvieną n-tojo elemento toje pačioje lygioje, kai elementai yra praeityje.
• :first-child – Valdo pirmą vaikų elementą, esantį elemente.
• :last-child – Valdo paskutinį vaikų elementą, esantį elemente.
• :first-of-type – Valdo pirmą HTML elemento tipo elementą esantį tėviniame elemente.
• :last-of-type – Valdo paskutinį HTML elemento tipo elementą esantį tėviniame elemente.
• :only-child – Valdo elementą, kuris neturi brolio ir yra vienintelis vaikų elementas tėviniame elemente.
• :only-of-type – Valdo elementą, kuris neturi vieno tokio pat tipo brolio ir yra vienintelis tokio pat tipo vaikų elementas tėviniame elemente.
• :empty – Valdo tuščius elementus.
Pateikti selektoriai daro darbą su HTML žyma žymiai lengvesnį, nes sudėtingos klasės apibrėžtys priklauso praeičiai.
