Javascript CSS-kenmerk toevoegen

| | | | | | | |

Met CSS-selectors kunnen webontwikkelaars een bepaald element of een bepaalde set elementen op een webpagina opmaken.

Als u met selectors werkt, kunt u ervoor kiezen om alleen elementen met een bepaald kenmerk te targeten. Dit is waar de CSS-kenmerkselector van pas komt. Met de kenmerkkiezer kunt u bepaalde stijlen alleen toepassen op elementen met een specifiek kenmerk.

In deze zelfstudie wordt uitgelegd hoe u de CSS-kenmerkkiezer gebruikt bij het stylen van elementen. Aan het einde van deze zelfstudie hebt u een goed begrip van het gebruik van de kenmerkkiezer om elementen te definiëren.

HTML-kenmerken

In HTML worden kenmerken gebruikt om aanvullende kenmerken of eigenschappen van een element. Het kenmerk height definieert bijvoorbeeld de hoogte van een afbeelding en het kenmerk title definieert de titel van een webelement.

Declareer kenmerken met behulp van de naam/waarde-paarstructuur. Dit betekent dat een attribuut als dit in een HTML-bestand zal verschijnen: name = "value". Lees onze gids voor HTML-kenmerken voor meer informatie over HTML-kenmerken.

CSS-kenmerkkiezer

Wanneer u een site ontwerpt, wilt u misschien elementen opmaken op basis van hun attribuutwaarde of niet. Hiervoor gebruikt u de CSS-attribuutselector.

De twee stappen die u moet volgen bij het gebruik van de attributenselector zijn:

  1. Wikkel een attribuut ` s tussen vierkante haken.
  2. Geef de stijlen op die u wilt toepassen op kenmerken met deze naam.

Laten we enkele voorbeelden bekijken van CSS-kenmerkkiezer in actie.

CSS [Attribuut]

De meest basale vorm van het selector-attribuut is: [attribuut]. Met andere woorden, zet de naam van een attribuut tussen vierkante haken.

Stel dat we de lettergrootte van elk element met een title-attribuut willen instellen op 16px. We kunnen het doen met deze code:

Onze CSS-regelcode is alleen van toepassing op elementen met een title-attribuut. De lettergrootte van elk element waarvoor een title-attribuut is opgegeven, ongeacht de waarde die door het attribuut is opgeslagen, wordt gewijzigd in 16px volgens de bovenstaande regel.

U kunt uw nauwkeurigere kenmerkselector door een of beide van de volgende opties op te geven:

Stel bijvoorbeeld dat u de grootte van alle tekst in de alinea wilt instellen koptekst naar 16px. U kunt dit doen met deze code:

De letter p aan het begin van het selector-attribuut vertelt de browser om de tekenstijl alleen toe te passen op

-tags . Het [title]-gedeelte van de selector vertelt de browser om de stijl van politie alleen toe te passen op

tags met een gespecificeerd title-kenmerk.

T Dus na het lezen van deze code, zal de browser de lettergrootte van alle alineatitels (p) converteren naar 16px. Deze code heeft geen invloed op andere tekst op de pagina.

Met de kenmerkselector [attribute = "value"] kunnen programmeurs stijlen alleen op elementen toepassen. Attribuut waarvan de waarden ‚Äã‚Äãgelijk zijn aan de waarde die is opgegeven in de selector.

Stel dat we de achtergrondkleur van alle links op de startpagina van Python.Engineering op oranje willen zetten. Deze stijl zou de achtergrondkleur van het a element op oranje moeten zetten. We kunnen deze actie uitvoeren met de volgende CSS-code:

Deze regel selecteert alle -elementen op uw webpagina waarvan het href-kenmerk gelijk is aan python.engineering. Zet vervolgens de achtergrondkleur van al deze elementen op oranje.

CSS [attribuut ~ = "value"]

De [attribuut ~ = & ldquo De selector ; value "] stelt u in staat om elementen te selecteren met attribuutwaarden ‚Äã‚Äãdie een specifiek woord bevatten.

Stel bijvoorbeeld dat u een stijl wilt toepassen op alle p -elementen waarvan de titels overeenkomen met het woord blauw. Voor deze stijl moet de tekstkleur van deze elementen worden gewijzigd in blauw.

We kunnen gebruiken de volgende regel om dit te doen:

Deze regel vindt alle tags

geassocieerd met titels die het woord "blauw" bevatten en definieert de kleur van de tekst in deze tags

blauw. Dus , als een

tag de titel kleur blauw of kleur blauw heeft, wordt deze stijl toegepast, maar deze regel niet is van toepassing op een

tag met de titel blueColor omdat het woord b lue niet onafhankelijk aanwezig is in het attribuut.

Dit is anders dan * = selector, die niet alleen een specifiek woord in een attribuut kan vinden, maar ook een specifieke waarde in een attribuut.

CSS [attribuut | = "waarde"]

De [attribuut | = "waarde"] selector stelt u in staat om elementen te selecteren waarvan de attributen beginnen met een bepaalde waarde (bijvoorbeeld "Top"). Dit omvat elementen met attributen die beginnen met de opgegeven waarde en die een koppelteken bevatten gevolgd door extra tekst (bijvoorbeeld "top-style" en andere "top-" waarden). Merk op dat de code een verticale balk (|) vereist na het woord " Class.‚"

Stel bijvoorbeeld dat u een top padding van 10 pixels wilt toewijzen aan elk met een class attribuut dat begint met top, inclusief de waarden gevolgd door andere waarden ‚Äã‚Äãgescheiden door koppeltekens. U kunt dit doen met deze code:

Deze regel past een opvulling van 10px toe bovenaan elke

Het is belangrijk op te merken dat de opgegeven waarde een enkel heel woord moet zijn of een woord gevolgd door een koppelteken. Met andere woorden, onze stijl hierboven zou van toepassing zijn op element met de class naam topstyle.

CSS [attribuut ^ = "waarde‚"]

De [attribuut ^ = & ldquo De selector; value ‚"] wordt gebruikt om elementen te selecteren waarvan de attribuutwaarde begint met een specifieke waarde. De opgegeven waarde hoeft geen heel woord te zijn, in tegenstelling tot de [attribute | = "value"] waar we het eerder over hadden.

Stel dat we een pad van minder dan 10 pixels willen toepassen op elk

De webbrowser van de gebruiker past de opvulling-bottom-stijl toe die we hebben gedefinieerd op alle

CSS [attribuut $ = "value‚"]

L `operator $ = wordt gebruikt om alle elementen te selecteren waarvan de attribuutwaarden eindigen op een bepaalde waarde. Stel dat u bijvoorbeeld de tekstkleur wilt wijzigen in grijs van alle hyperteksttekst waarvan de href-attribuutwaarden ‚Äã‚Äãeindigen op .app. U kunt dit doen met deze code:

Deze selector wordt toegepast op alle elementen van uw webpagina waarvan de href-waarden eindigen op .app .

CSS [attribuut * = "waarde"]

Met de operator * = kunt u alle elementen selecteren waarvan de waarden ‚Äã‚Äãd `attribuut een bepaald waarde. In tegenstelling tot de operator ~ = kan deze attribuutselector een bepaalde waarde in een klasse vinden, niet slechts een enkel woord.

Fo Stel bijvoorbeeld dat we willen toepassen een 50px opvulling rond alle

Deze regel definieert een 50px opvulling rond alle HTML-elementen met at class-attributen die de term allPadding bevatten. Elementen met de klassenamen new allPadding, surround allPadding red, allPaddingblue en allPadding-true zijn dus allemaal onderworpen aan deze stijl.

Conclusie

Met de CSS-attribuutselector kunnen ontwikkelaars elementen selecteren op basis van attribuutwaarden ‚Äã‚Äãen specifieke stijlen toepassen op die elementen.

p>

In deze tutorial wordt aan de hand van voorbeelden de basis uitgelegd van attribuutkiezers en het gebruik van alle typen CSS-attribuutkiezers. U bent nu klaar om CSS Attribute Selector als een professional te gaan gebruiken.


CSS is een van de drie belangrijkste vaardigheden die worden gebruikt bij webontwikkeling. Download de app
gratis Python.Engineering vandaag spreken met een ervaren loopbaancoach die je kan adviseren over de vaardigheden die je nodig hebt om een carrière als webontwikkelaar na te streven.

Shop

Learn programming in R: courses

$

Best Python online courses for 2022

$

Best laptop for Fortnite

$

Best laptop for Excel

$

Best laptop for Solidworks

$

Best laptop for Roblox

$

Best computer for crypto mining

$

Best laptop for Sims 4

$

Latest questions

NUMPYNUMPY

psycopg2: insert multiple rows with one query

12 answers

NUMPYNUMPY

How to convert Nonetype to int or string?

12 answers

NUMPYNUMPY

How to specify multiple return types using type-hints

12 answers

NUMPYNUMPY

Javascript Error: IPython is not defined in JupyterLab

12 answers

News


Wiki

Python OpenCV | cv2.putText () method

numpy.arctan2 () in Python

Python | os.path.realpath () method

Python OpenCV | cv2.circle () method

Python OpenCV cv2.cvtColor () method

Python - Move item to the end of the list

time.perf_counter () function in Python

Check if one list is a subset of another in Python

Python os.path.join () method