De hiërarchie van ID en klasse in CSS

Ontwerpers van sites willen voldoen aan de XHTML Strict richtlijnen opgegeven door het World Wide Internet Consortium meestal toevoegen Cascading Style Sheets aan hun code. Omdat W3C richtlijnen inline kenmerken zoals het lettertype en kleur verbieden, moet u CSS webelementen aanpassen. CSS bestaat uit ID, klasse en andere soorten selectors. Browsers toepassen op pagina-elementen volgens een specifieke hiërarchie.

Klasseselector

Een klasseselector kunt u geen benoemde klasse zoals bigBox te maken. Definiëren van de klasse kenmerken zoals in het volgende voorbeeld wordt getoond:

.bigBox {achtergrond-kleur: rood; border-color: Blue}

Elk pagina-element verwijzen naar de klasse bigBox verwerft een rode achtergrond en een blauwe rand. De div-element onderstaande verwijzingen de bigBox klasse:

< div class = "bigBox" >< / div >

Klassekiezers verschijnen tussen een < style >-openingstag en een afsluitende < / style >-code in een HTML-document. Zo veel klassen als u nodig hebt aan het document toevoegen.

Id-Selector

Ontwerpers van sites toevoegen vaak ID kenmerken aan pagina-elementen. Een ID maakt het mogelijk voor JavaScript benaderen en bewerken van een element. De div-element hieronder heeft een ID waarvan de waarde id1 is.

< div id = "div1" >

W3C richtlijnen bestaan uit namen van kenmerken, zoals ID, worden weergegeven in kleine letters. Een JavaScript-functie kan toegang krijgen tot deze div door het uitvoeren van de volgende instructie.

var divObject = document.getElementById("div1").

U hebt ook de optie van een element ID om naam te gebruiken als een CSS-kiezer. Een id-selector kunt definiëren kenmerken op dezelfde manier dat een klasse hen definieert. Plaats een hekje in de voorkant van een ID bij het gebruik ervan als een CSS-kiezer.

ID en klasse hiërarchie

Veel ontwerpers van sites toevoegen vaak klassenamen en id's aan webpagina-elementen. Id's die zijn gekoppeld aan elementen hebben soms CSS-kenmerken en de andere keer die zij niet. Als uw element verwijzingen heeft een CSS-klasse en een ID die CSS kenmerken heeft, kan een conflict optreden zoals aangegeven in het onderstaande voorbeeld:

.bigBox {achtergrond-kleur: rood; border-color: Blue}

div1 {achtergrond-kleur: groen; border-color: White}

Beide selectoren van een element kleuren instellen, maar deze kleuren zijn verschillend. Tenzij u de hiërarchie van ID en klasse begrijpt, weet u niet hoe een browser kan het oplossen van dit conflict.

Hiërarchie resolutie

Wanneer een browser-element wordt verwezen naar een ID en een klasse waarvan de kenmerken niet conflicteren, gebruikt de browser alle kenmerken om de stijl van het element. Bijvoorbeeld, als een ID een rode rand definieert en een klasse een lettertype Arial definieert, de browser beide opmaakprofielen toegepast op het element. Als ID en klasse de dezelfde eigenschap definieert, de browser stijlen met behulp van het element het id attribuut waarde en worden genegeerd in de klasseselector is gedefinieerd. Ontwerpers van sites verwijzen naar dit besluitvormingsproces hiërarchische browser als specificiteit.