logo

TechCodeview

CSS pirmais bērns

Pirmais bērns — CSS selektors (pirmais bērns) ļauj mums piemērot pirmā elementa stilu tieši otram elementam. Saskaņā ar CSS Selectors 3. līmeņa specifikāciju, to dēvē par strukturālu pseidoklasi, jo jebkura satura stils ir balstīts uz to, kā tas ir saistīts ar tā vecāku un brāļu saturu.

Sintakse 

 :first-child { //property }

Piemērs 

 h1:first-child { color: blue; } <p> <span>Let&apos;s get started</span></p>

Izvade

CSS pirmais bērns

Paskaidrojums:

  1. Divi div tagi veido korpusa bloku iepriekš minētajā kodā.
  2. Ir daudz rindkopu tagu

    ar dažādiem snap tagiem pirmajā div elementā.

  3. Galvenes tags un rindkopas tags

    ar snap tagu ir iekļauti otrā tagā div.

  4. Galvenajā blokā esam pielietojuši iekšējo vai iegulto CSS un rindkopas tagā izveidojuši snap tagu. Tomēr mums nav jāizveido klase snap tagam; tā vietā mēs varam izmantot pirmo pakārtoto atlasītāju (p:first-child), lai uzreiz identificētu pirmo snap taga elementu pirmajā div tagā. Sākotnējam elementam (snap) varam piešķirt kādu stilu. Rindkopā ir divi snap tagi, taču, kā redzam, ir veidots tikai pirmais tags, bet pārējie ir ignorēti.
  5. Mēs varam redzēt, kā pirmais bērns meklēja pirmo snap tagu un veidoja to otrajā div tagā. Elementam ir jābūt pirmajam elementam starp tā brāļiem un māsām vecāktagā, uz kuru jāatlasa pirmais pakārtotais elements; pretējā gadījumā tas netiks izvēlēts.

IzmantojotRindas atzīme

Izmantojot rindas tagu, mēs varam lietot CSS pirmo atvasinājumu. Rezultātā, ja rindas tagam piemērosim stilu, izmantojot pirmo pakārtoto atlasītāju, tiks veidots tikai pirmās rindas taga stils, bet pārējā rindas taga daļa netiks veidota. Pirmais pakārtotais elements atlasīs vecāktaga pirmās rindas elementu, bet pārējais tiks ignorēts.

kā savienot pārī Beats austiņas

Sintakse 

 tr:first-child{ //CSS declarations with style properties; }

Piemērs

Lai labāk izprastu, apskatīsim piemēru par pirmo pakārtoto CSS, izmantojot rindas taguCSS.

 Example of First Child in CSS using row tag tr:first-child { font-size: 40pixels; color: black; background-color: lightblue; } <table class="table"> <tr> <th>Name</th> <th>ID</th> <th>Branch</th> </tr> <tr> <th>Priya</th> <th>123</th> <th>CSE</th> </tr> <tr> <th>John</th> <th>435</th> <th>ECE</th> </tr> <tr> <th>David</th> <th>544</th> <th>MECH</th> </tr> <tr> <th>Sushma</th> <th>765</th> <th>CIVIL</th> </tr> </table>

Izvade

CSS pirmais bērns

Paskaidrojums:

  1. Iepriekš minētā koda pamatteksta blokā ir studentu informācijas tabulas tagi.
  2. Ir vairākas atzīmju rindastabulas tagā, un pirmās rindas tagam ir galvenes, piemēram, skolēna saraksta numurs, vārds un atzīmes. Studenta dati ir ietverti atlikušajos rindu tagos.
  3. Rindas atzīmes veidošanaitabulas tagā, mēs esam pielietojuši iekšējo vai iegulto CSS galvas bloka iekšpusē. Tomēr mums nav jāizveido klase rindas tagam; tā vietā mēs vienkārši izmantojam pirmo pakārtoto atlasītāju (p:first-child), kas automātiski atpazīs pirmās rindas taga elementu tieši tabulas tagā. Mēs varam veidot rindas tagu, kas ir pirmais elements. Tabulas iekšpusē ir vairākas atzīmju rindas. Tomēr, kā redzam, pirmais tags tiek veidots, bet pārējie tiek ignorēti.

Secinājums

Šajā rakstā mēs uzzinājām par CSS pirmo bērnu. Šeit ir pirmā bērna secinājums rakstā:

  1. CSS pirmajā pakārtotajā (:first-child) atlasītājs ļauj nekavējoties lietot pirmā elementa stilu otram elementam.
  2. Pirmais bērns veido materiāla stilus, pamatojoties uz to, kā tas ir saistīts ar vecāku un brāļu un māsu saturu.
  3. Pseidoklase, kas ir pozīcijas un struktūras klases loceklis, ir pirmais bērns. Nepārbaudot, vai nav vairāk viena veida brāļu un māsu (elementu), pirmā klase mēģinās saskaņot ar vecāku pirmo tiešo bērnu.