Er det en CSS -velger for elementer som inneholder visse tekst?

CSS -velgerne velger HTML -elementene for å bruke stylingegenskaper. Disse brukes til å finne elementene du vil style. Det er visse kategorier av CSS-velgere, for eksempel pseudoklasse, enkle utvalgere og andre. Mer spesifikt er attributtvelgeren det beste alternativet for å velge elementet som har en bestemt tekst. Kombinatorvelgeren kan også brukes til dette formålet.

Denne artikkelen vil demonstrere følgende metoder:

• Metode 1: Velge element som inneholder visse tekst ved hjelp av CSS -attributtvelgeren
• Metode 2: Velge element som inneholder visse tekst ved bruk av CSS General Sibling Selector

Metode 1: Velge element som inneholder visse tekst ved hjelp av CSS -attributtvelgeren

CSS -attributtvelgeren “CSS [attributt ~ = “Verdi”] Valg”Kan bidra til å velge elementet med bestemt tekst.

Syntaks

La oss forstå syntaksen til CSS -attributtvelgeren:

[attributtnavn ~ = verdi]

// CSS -erklæringer

Her:

• “attributtnavn”: Attributtet som brukes i HTML -elementet med viss tekst er spesifisert her.
• “~”: Dette symbolet er en generell søskenkombinator. Det brukes til å velge hvert element som er et gitt elements neste søsken.
• “verdi”: Det indikerer attributtverdien.

Eksempel

Følg de listede instruksjonene i HTML -filen:

• Først, legg til “”Element og tilordne en klasse”Elementer-div”.
• Legg til "

  ”,“

  ”, Og“

  ”Elementer i Div.

• “

  ”Og“

  ”Juster overskriftene på siden. “

  ”Overskriften er litt mindre enn“

  ”Element.

• “

  ”Element spesifiserer tekstinnholdet på siden:

Linuxhint

Stasjonære ting

bok

blyant

Notisblokk

bok

La oss style Div “Elementer-div”Og overskriften”

”Ved å bruke CSS -egenskapene som nevnt nedenfor. Etter det vil vi se hvordan du velger "

”Elementets tekst ved hjelp av CSS -attributtvalgene.

Stil “elementer-div” -klasse

Følgende CSS -egenskaper brukes på “Elementer-div”Klasse:

.elementer-div
tekst-align: sentrum;
Font-størrelse: 17px;
Font-Family: 'Trebuchet MS';

Her:

• “Tekstalign”Bestemmer tekstjusteringen.
• “skriftstørrelse”Justerer elementfontstørrelsen.
• “Font-familie”Plukker ut fontstilen til elementet.

Stil “H2” -element

“H2”Er også kjent som elementvelgeren. Det brukes til å style "

”Element med følgende egenskaper:

H2
Font-størrelse: 30px;
Brevavstand: 0.2em;
Farge: RGB (182, 14, 238);

I ovennevnte kodeblokk:

• “avstand mellom bokstavene”Justerer avstanden mellom elementets tegn.
• “farge”Tildel fargen til teksten.
• “skriftstørrelse”Eiendom er definert i ovennevnte avsnitt.

Velg “Book” -tekst

For å velge en bestemt tekst fra dokumentet, er det ingen spesifikk velger. Elementets attributt trenger bare å spesifiseres. Deretter kan vi ved hjelp av attributtverdien velge teksten i CSS:

[stasjonær ~ = “bok”]
Bakgrunnsfarge: CornflowerBlue;

Her, i CSS, “bakgrunnsfarge”Eiendom justeres til teksten ved å spesifisere attributtet”stasjonær”Å ha verdi”bok”.

Utgangen nedenfor viser at alle elementene som har attributtverdien “bok”Er stylet:

La oss nå sjekke eksemplet for å bruke stiler på "blyant”Tekst. For dette formålet er attributtet stasjonær med verdien “blyant”Hentes i CSS gjennom attributtvelgeren:

[stasjonær ~ = blyant]
bakgrunnsfarge: RGB (240, 168, 234);
polstring: 5px;

Her:

• “bakgrunnsfarge”Spesifiserte fargen på elementets bakgrunn.
• “polstring”Tildeler plass rundt elementets innhold.

Produksjon

Metode 2: Velge element som inneholder visse tekst ved bruk av CSS General Sibling Selector

Det er en annen metode for å bruke stiler på elementene som har tekst. Men denne metoden bør brukes når du har flere "

”Elementer som har litt tekst, og du må style dem alle på en gang. For å gjøre det, spesifiser elementet som er rett før “

”Elementer, legg deretter til det generelle søskenkombinatoren (~) symbolet, og nevn elementet som har tekst for å bruke stiler.

Syntaks

Her er syntaks for det ovennevnte scenariet:

Første sekvens-element ~ Second-Sequence-element
CSS -erklæringer

Eksempel

La oss legge til styling til alle “ H4 ~ P
Farge: Crimson;
Fontvekt: fet;

“H4 ~ p”Begynner“

”Elementer som er direkte søsken av“

”Element. Følgende beskrevne egenskaper legges til det:

• “Fontvekt”Eiendom betegner tykkelsen på elementets skrift.
• “farge”Eiendom fikser fontens farge.

Produksjon

Ved å bruke disse måtene kan du velge elementer som har viss tekst til stil i CSS.

Konklusjon

For å velge elementene som inneholder viss tekst, CSS “attributt velgere”Og“Generell søskenkombinatorvelger" kan bli brukt. Attributtvalgene spesifiserer attributtnavnet til elementet og dets verdi. Deler deretter CSS -egenskapene for det. General Sibling Combinator Selector velger hvert element som blir fulgt av forrige velger. Denne artikkelen har demonstrert måtene å velge elementer i CSS med viss tekst.