Vergleich class und id

[Gerhard]

Hallo,
ich habe in meinem CSS aus
  .irgendwas
  #irgendwas
gemacht und in meinem html aus
  class="irgendwas"
  id="irgendwas".
(die id kann im html-Dokument nur einmal vorkommen).Im CSS-Dokument habe ich (mehrfach geprüft) an allen Stellen die Ersetzung vorgenommen.
Wenn ich nun das Ergebnis der beiden Varianten vergleiche, so sind diese leicht unterschiedlich, und zwar sind die Abstände zwischen den einzelnen Divs bei der Verwendung des id=.. größer (getestet in Firefox und IE).
Gibt es hierzu schon aus der Theorie eine Erklärung - sonst müsste ich die großen Dateien erst auf übersichtliche Maße verkleinern?

Gruß
Gerhard

[Matthias Apsel]

Om nah hoo pez nyeetz, Gerhard!

Durch das Ersetzen von einer Klasse durch eine ID änderst du die Spezifität.

<div class="foo">  
  <p class="bar">Dieser Text ist blau</p>  
</div>

.bar {  
  color: red;  
}  
.foo p {  
  color: blue;  
}

Der Text des ersten Absatzes ist blau, weil der Selektor .foo p spezifischer ist als .bar.

<div class="foo">  
  <p id="bar">Dieser Text ist rot</p>  
</div>

#bar {  
  color: red;  
}  
.foo p {  
  color: blue;  
}

Hier ist jedoch der Selektor #bar spezifischer als .foo p.

http://wiki.selfhtml.org/wiki/CSS/Kaskade#Spezifität_der_Regelsätze
http://www.standardista.com/css3/css-specificity/

Matthias

[Gerhard]

Hallo

Durch das Ersetzen von einer Klasse durch eine ID änderst du die Spezifität.

http://wiki.selfhtml.org/wiki/CSS/Kaskade#Spezifität_der_Regelsätze

Das ist ja ganz schön komplex, um nicht zu sagen undurchsichtig.

http://www.standardista.com/css3/css-specificity/

... und dies verstehe ich überhaupt nicht!
Trotzdem danke!

[Gerhard]

Hi

in dem Dokument

http://wiki.selfhtml.org/wiki/CSS/Kaskade#Spezifität_der_Regelsätze

steht
"Autoren-Stylesheets besitzen die höchste Priorität und überschreiben sowohl Browser- als auch Benutzer-Stylesheets."

in dem Dokument steht
"Erst dann kommt das Stylesheet der Seite und dann das Benutzer-Stylesheet (mit höchster Priorität)."

Das ist doch hoffentlich nicht von Browser zu Browser unterschiedlich.
Gruß
Gerhard

[Matthias Apsel]

Om nah hoo pez nyeetz, Gerhard!

Das ist doch hoffentlich nicht von Browser zu Browser unterschiedlich.

Nein, das ist für alle Browser gleich. Dennoch haben Benutzer die Möglichkeit, deine CSS-Empfehlungen außer Kraft zu setzen, etwa durch eine Mindestschriftgröße für Sehbehinderte.

Siehe auch http://forum.de.selfhtml.org/archiv/2014/1/t216069/#m1480693

Matthias

[Gerhard]

Hi Matthias,

Nein, das ist für alle Browser gleich.

Wenn es für alle Browser gleich ist, welche der beiden Aussagen ist dann richtig?
Hier noch einmal die widersprüchlichen Aussagen:
1. "Autoren-Stylesheets besitzen die höchste Priorität und überschreiben sowohl Browser- als auch Benutzer-Stylesheets."

2. "Erst dann kommt das Stylesheet der Seite und dann das Benutzer-Stylesheet (mit höchster Priorität)."
Gruß
Gerhard

[Matthias Apsel]

Om nah hoo pez nyeetz, Gerhard!

Wenn es für alle Browser gleich ist, welche der beiden Aussagen ist dann richtig?

Diese: Der Nutzer hat mit '!important' das letzte Wort. Ohne '!important' hat es der Webseitenbetreiber.

Matthias

[Gunnar Bittersmann]

@@Gerhard:

nuqneH

Wenn es für alle Browser gleich ist, welche der beiden Aussagen ist dann richtig?

Keine.

Siehe Spec, Cascading.

Qapla'

[Gerhard]

Hi

Siehe Spec, Cascading.

Wollen die w3-Organisatoren den Anwendern die Lust verderben? Komplizierter geht es wohl kaum. Um das Ganze zu verstehen muss man erst wissenschaftliche Pamphlete über

Transition declarations [CSS3-TRANSITIONS]
    Important user agent declarations
    Important user declarations
    Important override declarations [DOM-LEVEL-2-STYLE]
    Important author declarations
    Animation declarations [CSS3-ANIMATIONS]
    Normal override declarations [DOM-LEVEL-2-STYLE]
    Normal author declarations
    Normal user declarations
    Normal user agent declarations
lesen?!

Ich bin frustriert und unschlüssig, ob ich vielleicht zunächst Englisch und dann Informatik studieren soll, um einige popelige Internet-Seiten für einen Verein erstellen zu können, Seiten, die dann auf den verschiedensten Geräten und Browsern vernünftig aussehen.

Danke für Eure Hilfe
Gerhard

[Auge]

Hallo

… Um das Ganze zu verstehen muss man erst wissenschaftliche Pamphlete über

Transition declarations [CSS3-TRANSITIONS]
    Important user agent declarations
    Important user declarations
    Important override declarations [DOM-LEVEL-2-STYLE]
    Important author declarations
    Animation declarations [CSS3-ANIMATIONS]
    Normal override declarations [DOM-LEVEL-2-STYLE]
    Normal author declarations
    Normal user declarations
    Normal user agent declarations
lesen?!

Min-Des-Tens! ;-)

Um auf das von dir nicht verstandene Schaubild zurückzukommen. Oberhalb der Bilder findest du Beispiele, die Bilder selbst sind (mMn nicht sehr schöne) Symbole. Du wirst feststellen, dass sich die verschiedenen Schreibweisen in den Beispielen in den Symbolen spiegeln. Unterhalb der Bilder ist jeweils eine Zahlenreihe dargestellt.

Die Zahlenreihe ist – ählich Stein-Schere-Papier(-Echse-Spock) ;-) – folgendermaßen zu interpretieren. Eine höhere Zahl in einem Block schlägt die niedrigere Zahl im selben Block und eine weiter links stehende Zahl schlägt eine weiter rechst stehende Zahl.

Tschö, Auge

[Ole]

Hallo Gerhard,

hier gibt es ein kleines Schaubild zu Spezifität

Gruß
Ole

[Encoder]

Sieht nett aus. Aber was tut es? Wenn ich auf etwas draufklicke, fängt es an zu flackern. Macht es mehr?

[Auge]

Hallo

Sieht nett aus. Aber was tut es? Wenn ich auf etwas draufklicke, fängt es an zu flackern.

Es flackert schon beim hovern. Du kannst dir diesen Beitrag zur kommenden Sehnenscheidenentzündung – oder wie das auch immer beim Zeigefinger heißen mag – klemmen.

Macht es mehr?

Hmm, ich habe auch nichts gefunden.

Tschö, Auge

[Tom]

Hello,

das ist ja noch viel schlimmer.

HTML:

<element>
<id ="id">
<dummteil class="class">

CSS:

element{}
#id{}
.class{}

Da ist mehr erlaubt, als "man" das jemals gedacht hat...

Hi Gunnar, lass es uns jetzt und hier endlich auf den Punkt bringen ;-P

Liebe Grüße aus dem schönen Oberharz

Tom vom Berg

[Gunnar Bittersmann]

@@Tom:

nuqneH

Da ist mehr erlaubt, als "man" das jemals gedacht hat...

Das ist auch gut so; das ist durchdacht.

Hi Gunnar, lass es uns jetzt und hier endlich auf den Punkt bringen ;-P

Der Punkt ist, dass diejenigen irren, die einem weismachen wollen, man solle ausschließlich Klassenselektoren verwenden, keine ID- oder Elementtypselektoren.

Qapla'

[Marco]

Hallo,
gerade bin ich auf  das Beispiel und das Beispiel gestoßen.
Ich habe allerdings keinerlei Ahnung, wie man diese Beispiele interpretiert.
Werden diese Bilder angzeigt bei entsprechenden CSS-Angaben? Wo sind dann die zugehörigen Quelltexte CSS, HTML und die Bilder?
Gruß
Marco

[Matthias Apsel]

Om nah hoo pez nyeetz, Marco!

gerade bin ich auf  das Beispiel und das Beispiel gestoßen.
Ich habe allerdings keinerlei Ahnung, wie man diese Beispiele interpretiert.
Werden diese Bilder angzeigt bei entsprechenden CSS-Angaben? Wo sind dann die zugehörigen Quelltexte CSS, HTML und die Bilder?

Das sind keine Beispiele in dem Sinne. Da wird nur schön visualisiert, dass ein Regelsatz beispielsweise mit dem Selektor html body p:last-child a:hover img ignoriert wird, wenn der Selektor #myid zutrifft. Siehe etwa diesen Beitrag.

Matthias