Web-FrontendCSS-TutorialAnalyse des Unterschieds und der Verwendung zwischen Klasse und ID in CSSAnalyse des Unterschieds und der Verwendung zwischen Klasse und ID in CSS
Dieser Artikel stellt hauptsächlich die Analyse des Unterschieds und der Verwendung von Klasse und ID in CSS vor. Jetzt kann ich ihn mit allen teilen, die ihn brauchen.
Erstellt mit p CSS In Xhtml-Webseiten werden häufig Klassen und IDs zum Aufrufen von CSS-Stilattributen verwendet. Wann sollten wir also Klasse und wann ID verwenden? Erfahren Sie mehr über die grundlegenden Attribute und die Verwendung von CLASS und ID
Wir verwenden normalerweise bei der Verwendung von p CSS zum Erstellen von XHTML-Webseiten häufig Klasse und ID, um CSS-Stilattribute auszuwählen und aufzurufen. Für Anfänger, die CSS lernen, sind Klasse und ID möglicherweise vage. Gleichzeitig wissen sie nicht, wann sie Klasse und wann sie verwenden sollen und welche Verwendungen und Einschränkungen sie haben. Als nächstes erfahren wir mehr über die grundlegenden Eigenschaften und die Verwendung von CLASS und ID.
Klasse wird in Programmen „Klasse“ genannt, und in der geschriebenen Sprache von CSS wird sie auch „Klasse“ genannt. Im CSS-Stil wird es mit Kleinbuchstaben „Punkt“ und „.“ benannt, z. B.: .css5{attribute: attribute value;}, und auf der HTML-Seite wird class="css5" verwendet, um den Namen auszuwählen CSS wird auch CSS-Selektor genannt. Zum Beispiel: .css5{attribute: attribute value;} Der Selektor wird in HTML als „
I am a class example
“ bezeichnet. Wenn Sie nicht wissen, wie man CSS zitiert , Sie können mehr darüber erfahren CSS-Referenz.Und Klasse (Klasse) kann dieselbe Klasse unzählige Male auf derselben HTML-Seite aufrufen. In diesem Beispiel können Sie „css5“ unzählige Male auf der entsprechenden Webseite aufrufen. Dies zeigt auch, dass Klasse im Allgemeinen zum Aufrufen vorkonfigurierter Attribute in CSS verwendet wird. Wenn es hier beispielsweise ein vorkonfiguriertes Attribut wie „.class01{attribute: attribute value;}“ gibt, kann es wie der Aufruf einer Funktion verwendet werden ohne dass ein „Klassen“-Attribut wiederholt auf der Webseite konfiguriert werden muss, Sie müssen nur eine Klassenauswahl schreiben und können die Auswahl mit derselben CLASS-Klasse an einer beliebigen Stelle auf derselben Seite aufrufen.
ID stellt die Identität des Tags dar und wird in JS-Skripten verwendet. Wenn JS die Attribute eines Tags ändern möchte, verwendet JS den ID-Namen als eindeutige Kennung des Tags. Mit anderen Worten: Die ID ist lediglich die Kennung des Seitenelements, auf die von anderen Elementskripten usw. verwiesen werden kann. Wenn Ihre Seite zwei IDs enthält, weist die JS-Effektfunktion einen Logikfehler auf und Sie wissen nicht, welche ID Sie zum Ändern der Tag-Attribute verwenden sollen. Die ID in CSS ist nicht unbedingt für JS festgelegt, aber dieselbe ID kann nur einmal auf der Seite erscheinen und ist eindeutig. Obwohl wir vielleicht gerade erfahren haben, dass p+CSS-Enthusiasten dieselbe ID mehrmals auf einer Seite aufrufen können, aber immer noch kein Seitenverwirrungsfehler auftritt, müssen wir im Interesse des W3C und verschiedener Standards auch die Eindeutigkeit der ID in a beachten Seite. Um Probleme mit der Browserkompatibilität zu vermeiden.
p Wie verwende ich die ID auf der CSS-Seite?
Normalerweise benennen wir beim Definieren von CSS-Stilen den ID-Namen beginnend mit „#“, wie zum Beispiel: #css5{attribute: attribute value;} Dies ähnelt auch ein wenig der Definition einer Klasse, außer dass die Klasse beginnend benannt wird mit einem Kleinbuchstaben „.“ und die ID wird beginnend mit „#“ definiert. Wie verwende ich die ID? Die Verwendung von ID in CSS ist dieselbe wie die Verwendung von Klasse. Ersetzen Sie lediglich die Klasse durch die ID. Zum Beispiel: Definieren Sie die ID im CSS-Stil --- #css5{height:25px;width: 200px;}, rufen Sie die ID auf ---
Ich bin ID-Beispiel
.Als nächstes werfen wir einen Blick auf die vollständigen CLASS- und ID-Beispiele:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>p CSS中CLASS与ID实例 - -p+CSS-www.pcss5.com</title>
<style>
.css5{ width:100px; height:100px; border:1px solid #000; float:left; }
.css5_class{ background:#FFF;} /* 背景白色 */
#css5_id{ background:#FF0000;} /* 背景红色 */
</style>
</head>
<body>
<p class="css5 css5_class">我在浏览器下浏览，内容背景将是白色</p>
<p class="css5" id="css5_id">我在浏览器下浏览，内容背景将是红色</p>
</body>
</html>Als nächstes analysieren wir das obige Beispiel: class="css5 css5_class" Warum ist das so? Dies entspricht dem Aufruf der ausgewählten Klassen class css5 und css5_class. class="css5" id="css5_id" Hier wählen wir auch die Klassenklasse :css5 und id :css5_id.
Auf dieser Seite werden CSS-Instanzen, CLASS-Klassen bzw. IDs erläutert. Ich glaube, Sie werden in der Lage sein, sie genau zu verstehen und zu unterscheiden und flexibel zu sein. Besonderer Hinweis: Achten Sie bei der Benennung von ID, Klassen-ID und Klasse besonders auf die Groß-/Kleinschreibung. Beginnen Sie am besten nicht mit Chinesisch, um CSS-Klassennamen zu benennen.
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.
Verwandte Empfehlungen:
So steuern Sie das Anzeigen und Ausblenden von DIV-Ebenen mit CSS
So strecken Sie den Hintergrund Bild mit CSS-Padding, um wiederholte Anzeige zu vermeiden
Das obige ist der detaillierte Inhalt vonAnalyse des Unterschieds und der Verwendung zwischen Klasse und ID in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Das Erstellen eines animierten FaviconApr 18, 2025 am 10:35 AMEs ist das erste, wonach Ihre Augen beim Wechseln der Registerkarten suchen.
Verwenden Sie Ihre Domain mit einer netlify veranstalteten WebsiteApr 18, 2025 am 10:34 AMNetlify hat ihre eigenen Dokumente für benutzerdefinierte Domains. Wenn Sie also nach technischen Dokumenten des Pferdes auf der Suche nach dem Mund -Mund -Dokument sind, sollte dies als Quelle von behandelt werden
PseudocodeApr 18, 2025 am 10:33 AMYonatan Doron schrieb vor kurzem einen Beitrag über Medium mit dem Titel "Art of Code - Warum sollten Sie mehr Pseudocode schreiben." Ich liebe diesen Titel als Fan von Pseudocode
Lassen Sie Grunzen die Marie Kondo -Organisationsbehandlung gebenApr 18, 2025 am 10:31 AMWir leben in einer Ära von Webpack- und NPM -Skripten. Gut oder schlecht, sie übernahmen die Führung für das Bündeln und Aufgaben, das zusammen mit Rollup, JSPM und Gulp Titeln läuft. Aber
Sich von der großen Kluft abzweigenApr 18, 2025 am 10:27 AMIch mag den Begriff Front-End-Entwickler. Es enthält die Art Ihres Jobs, wenn Ihre Bedenken sind:
Die Reise eines Anfängers zum Starten einer WebsiteApr 18, 2025 am 10:20 AMIm September 2018 war ich erst ein paar Monate in meiner Reise zum Lernen von Webentwicklung. Da ich bei vielen neuen Entwicklern sicher der Fall ist, war es eine große Aufgabe
Alle neuen Tipps und Tricks ES2019Apr 18, 2025 am 10:19 AMDer ECMAScript -Standard wurde erneut mit dem Hinzufügen neuer Funktionen in ES2019 aktualisiert. Jetzt offiziell in Knoten, Chrom, Firefox und Safari erhältlich
Standortmonetarisierung mit Spule (und Entfernen von Anzeigen für Unterstützer)Apr 18, 2025 am 10:13 AMI ' Ich habe in der Vergangenheit eine Handvoll Websites anhand "Tipp mit Mikropayments" ausprobiert. Sie kommen und gehen. Das ist gut. Aus der Perspektive der Verlagssicht, es ist ' s
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
MinGW – Minimalistisches GNU für Windows
Dieses Projekt wird derzeit auf osdn.net/projects/mingw migriert. Sie können uns dort weiterhin folgen. MinGW: Eine native Windows-Portierung der GNU Compiler Collection (GCC), frei verteilbare Importbibliotheken und Header-Dateien zum Erstellen nativer Windows-Anwendungen, einschließlich Erweiterungen der MSVC-Laufzeit zur Unterstützung der C99-Funktionalität. Die gesamte MinGW-Software kann auf 64-Bit-Windows-Plattformen ausgeführt werden.
SublimeText3 Englische Version
Empfohlen: Win-Version, unterstützt Code-Eingabeaufforderungen!
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
SAP NetWeaver Server-Adapter für Eclipse
Integrieren Sie Eclipse mit dem SAP NetWeaver-Anwendungsserver.
PHPStorm Mac-Version
Das neueste (2018.2.1) professionelle, integrierte PHP-Entwicklungstool
