Wat is in CSS het verschil tussen “.” en “#” bij het declareren van een set stijlen?

Wat is het verschil tussen #en .bij het declareren van een set stijlen voor een element en wat is de semantiek die een rol speelt bij het beslissen welke te gebruiken?

Antwoord 1, autoriteit 100%

Ja, ze zijn anders…

#is een id selector, gebruikt om een enkelspecifiek element met een unieke id te targeten, maar . is een klassenkiezerdie wordt gebruikt om meerdereelementen te targeten met een bepaalde klasse. Om het anders te zeggen:

• #foo {}zal het enkeleelement opmaken dat is gedeclareerd met een attribuut id="foo"
• .foo {}zal alleelementen opmaken met een attribuut class="foo"(u kunt meerdere klassen hebben toegewezen aan een element ook, scheid ze gewoon met spaties, bijv. class="foo bar")

Typisch gebruik

Over het algemeen gebruik je # voor het stylen van iets waarvan je weet dat het maar één keer zal verschijnen, bijvoorbeeld dingen als lay-out-divs op hoog niveau, zoals zijbalken, bannergebieden, enz.

Klassen worden gebruikt waar de stijl wordt herhaald, b.v. stel dat u een speciale koptekst voor foutmeldingen gebruikt, kunt u een stijl h1.error {}maken die alleen van toepassing is op <h1 class="error">

Specificatie

Een ander aspect waarbij selectors verschillen in hun specificiteit – een ID-selector wordt geacht specifieker te zijn dan de klassenkiezer. Dit betekent dat waar stijlen op een element conflicteren, die zijn gedefinieerd met de meer specifieke Selector zal minder specifieke selectoren overschrijven. Bijvoorbeeld, gegeven <div id="sidebar" class="box">alle regels voor #sidebarmet opheffing conflicterende regels voor .box

Zie selectutorial voor meer geweldige primers op CSS selectors – zijn ze ongelooflijk krachtig en Je conceptie is simpelweg dat “# wordt gebruikt voor divs” die je goed zou doen om te lezen op precies hoe je CSS effectiever kunt gebruiken.

EDIT: ziet eruit als selectutorial is mogelijk naar de grote website in de lucht gegaan, dus probeer dit archief link in plaats daarvan.

2, Autoriteit 8%

De #betekent dat het overeenkomt met de idvan een element. De .betekent de klasnaam:

<div id="myRedText">This will be red.</div>
<div class="blueText">this will be blue.</div>
#myRedText {
    color: red;
}
.blueText {
    color: blue;
}

Merk op dat in een HTML-document het ID-kenmerk uniek moet zijn , dus als u meer dan één element hebt, moet u een specifieke stijl gebruiken.

3, Autoriteit 3%

De punt(.) geeft een klassenaam aan, terwijl de hash (#) een element met een specifieke idattribuut. De klasse is van toepassing op elk element dat is versierd met die specifieke klasse, terwijl de # stijl alleen van toepassing is op het element met die specifieke id.

Klassenaam:

<style>
   .class { ... }
</style>
<div class="class"></div>
<span class="class></span>
<a href="..." class="class">...</a>

Benoemd element:

<style>
   #name { ... }
</style>
<div id="name"></div>

Antwoord 4, autoriteit 2%

Het is ook vermeldenswaard dat in de cascadeeen id(#) selector is meer specifiekdan ab (.) selector. Daarom zullen regels in het id-statement de regels in het class-statement overschrijven.

Bijvoorbeeld als beide van de volgende uitspraken:

.headline {
  color:red;
  font-size: 3em;
}
#specials {
  color:blue;
  font-style: italic;
}

worden toegepast op hetzelfde HTML-element:

<h1 id="specials" class="headline">Today's Specials</h1>

de regel color:bluezou de regel color:redoverschrijven.

Antwoord 5, autoriteit 2%

Een paar snelle aanvullingen op wat al is gezegd…

Een idmoet uniek zijn, maar u kunt dezelfde id gebruiken om verschillende stijlen specifieker te maken.

Bijvoorbeeld, gegeven dit HTML-extract:

<div id="sidebar">
    <h2>Heading</h2>
    <ul class="menu">
        ...
    </ul>
</div>
<div id="content">
    <h2>Heading</h2>
    ...
</div>
<div id="footer">
    <ul class="menu">
        ...
    </ul>
</div>

U kunt hiermee verschillende stijlen toepassen:

#sidebar h2
{ ... }
#sidebar .menu
{ ... }
#content h2
{ ... }
#footer .menu
{ ... }

Nog iets handigs om te weten: je kunt meerdere klassen op een element hebben, door ze door spaties te scheiden…

<ul class="main menu">...</ul>
<ul class="other menu">...</ul>

Hiermee kunt u een gemeenschappelijke stijl hebben in .menumet specifieke stijlen met behulp van .main.menuen .sub.menu

.menu
{ ... }
.main.menu
{ ... }
.other.menu
{ ... }

Antwoord 6

Zoals vrijwel iedereen al heeft gezegd:

Een punt (.) geeft een klasseaan en een hekje (#) geeft een IDaan.

Het fundamentele verschil tussen is dat je een klasse op je pagina steeds opnieuw kunt gebruiken, terwijl een ID maar één keer kan worden gebruikt. Tenminste, als je je aan de WC3-normen houdt.

Een pagina wordt nog steeds weergegeven als u meerdere elementen met dezelfde ID hebt, maar u zult problemen inlopen als / wanneer u de elementen dynamisch wilt bijwerken door ze met hun ID te bellen, omdat ze niet uniek zijn.

Het is ook handig om op te merken dat ID-eigenschappen klasseneigenschappen zullen vervangen.

7

.classTarget het volgende element:

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

#classdoelwit het volgende element:

<div id="class"></div>

Merk op dat de ID in het hele document uniek moet zijn, terwijl een aantal elementen een klasse kan delen.

8

Hier is mijn opslag van het uitleggen van de regels .styleen #stylemaken deel uit van een matrix.
Dat zo niet in de juiste volgorde, kunnen ze elkaar overschrijven of conflicten veroorzaken.

Hier is de line-up.

Matrix

#style 0,0,1,0 id
.style 0,1,0,0 class

Als u deze twee wilt overschrijven, kunt u <style></style>HEKH heeft een Matrix-niveau of 1,0,0,0.
En @media-query’s zullen alles boven de bovenstaande …
Ik ben niet zeker van dit, maar ik denk dat de ID-selector #slechts één keer op een pagina kan worden gebruikt.