Gerhard: Vergleich class und id

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

  1. 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

    --
    Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Barke und Barkeeper.

    1. 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!

    2. 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

      1. 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

        --
        Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Tür und Türkei.

        1. 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

          1. 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

            --
            Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Mond und mondän.

          2. @@Gerhard:

            nuqneH

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

            Keine.

            Siehe Spec, Cascading.

            Qapla'

            --
            „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
            1. 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

              1. 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

                --
                Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war.
                Terry Pratchett, "Wachen! Wachen!"
                ie:{ fl:| br:> va:) ls:[ fo:) rl:( ss:| de:> js:| zu:}
                Veranstaltungsdatenbank Vdb 0.3
    1. Sieht nett aus. Aber was tut es? Wenn ich auf etwas draufklicke, fängt es an zu flackern. Macht es mehr?

      1. 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

        --
        Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war.
        Terry Pratchett, "Wachen! Wachen!"
        ie:{ fl:| br:> va:) ls:[ fo:) rl:( ss:| de:> js:| zu:}
        Veranstaltungsdatenbank Vdb 0.3
  2. 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

    --
     ☻_
    /▌
    / \ Nur selber lernen macht schlau
    http://bikers-lodge.com
    1. @@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'

      --
      „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
  3. 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

    1. 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

      --
      Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Brand und Brandenburg.