Level Up in CSS – erweiterte Selektoren

1. Willkommen!: Hi, alle. Vielen Dank, dass Sie auf diese Klasse klicken. Mein Name ist Verity und ich bin ein Front-End-Entwickler aus Sydney, Australien. Nun, in dieser Klasse, werden wir einen tiefen Einblick in CSS-Selektoren nehmen, und wie Sie sie verwenden können, um Ihr Styling-Spiel zu verbessern , wenn Sie an Ihren Web-Projekten arbeiten. Unser Projekt für diese Klasse wird mit einem Akkordeon-Stil Menü arbeiten , das ich bereits für Sie zusammengestellt habe, und Sie können diese Kursdateien im Abschnitt „Ihr Projekt“ unter den angehängten Dateien unter diesem Video herunterladen . Wir werden uns dieses Akkordeon ansehen und sehen, wie wir diese erweiterten Selektoren verwenden können , um Elemente auf unterschiedliche Weise und spezifischere gezielte Wegezu stylen unterschiedliche Weise und spezifischere gezielte Wege , die Ihre Webprojekte so viel besser machen werden. Nun, dieser Kurs geht davon aus, dass Sie bereits mit CSS und HTML gearbeitet haben, aber wenn Sie nie eines davon berührt haben, machen Sie sich keine Sorgen, Sie können zurückgehen und einen Blick auf meine vorherige Klasse werfen, die heißt How to Build a Website, und das wird Ihnen einige grundlegende Fähigkeiten in HTML und CSS geben. Dann können Sie diese Klasse nehmen, die nur auf den Fähigkeiten aufbaut , die Sie in dieser Klasse lernen werden. Nun, wenn Sie irgendwann stecken bleiben, stellen Sie sicher, dass Sie unten kommentieren, und ich werde versuchen, Ihnen zu helfen. Hoffentlich werden Ihre Klassenkameraden versuchen, Ihnen zu helfen, und natürlich stellen Sie sicher, dass Sie Ihre Arbeit im Abschnitt Projekte präsentieren. Ich würde gerne sehen, wie Sie das Akkordeon anpassen und die Effekte, die Sie entwickeln können. Experimentieren Sie einfach mit jedem der verschiedenen Arten von Selektoren, denn der beste Weg, um zu lernen, ist natürlich, indem Sie tun. Ok. Wenn Sie bereit sind, loszulegen, stellen Sie sicher, dass Sie Ihre Kursdateien herunterladen und los geht's. 2. GRUNDLEGENDE SELEKTOREN: Wenn Sie bereits mit CSS gearbeitet haben, sind Sie wahrscheinlich auf die drei grundlegenden Selektortypen gestoßen, aber nur für den Fall, werden wir jetzt eine kurze kleine Zusammenfassung machen, um sicherzustellen, dass alle auf derselben Seite sind. Unsere grundlegenden Selektoren, die Sie jeden Tag in CSS verwenden würden, sind Ihre Element-, Klassen- und ID-Selektoren. Jetzt nur um dir eine kurze Erinnerung daran zu geben, was jedes dieser Dinge ist. Ein Elementselektor ist die Art und Weise, wie Sie ein beliebiges Element auf der Seite eines angegebenen Namens anvisieren . In Ihrem HTML können Sie also ein P-Tag, ein Bild-Tag, ein div-Tag oder eine Spanne haben. Nur als Beispiel könnte es alles sein und die Art und Weise, auf die Sie in Ihrem CSS zielen würden , besteht darin, einfach den Namen des Elements in CSS, gefolgt von Ihren geschweiften Klammern und dann Ihren Stilen innerhalb der geschweiften Klammern. Nun wendet eine Klasse Stile auf alle Elemente auf einer Seite an, die Sie den angegebenen Klassennamen angegeben haben. Eine Klasse wird mit einem vollständigen Stopp davor geschrieben und Sie können sie benennen, was auch immer Sie wollen, solange Sie das Klassenattribut dem Element geben, auf das es angewendet werden soll und den Namen zwischen den Kommas setzen. Nun unterscheidet sich die Klasse von einem Elementselektor dadurch, dass ein Elementselektor jeden einzelnen Absatz auf der Seite auswählt, während ein Klassenselektor nur jene Elemente anvisiert , denen Sie die Klasse gegeben haben. Angenommen, Sie hatten eine Reihe von Absatz-Tags auf Ihrer Seite. Wenn Sie die Klasse nur auf einen dieser Absätze angewendet haben, werden die Formatvorlagen nur auf diesen bestimmten Absatz angewendet. Schließlich ist unser ID-Selektor, der die spezifischste aus den drei ist. Es wird in CSS geschrieben, indem ein Hash vor dem Namen der ID verwendet wird. Es funktioniert sehr ähnlich wie eine Klasse, aber es ist wichtig, sich daran zu erinnern, dass eine ID bedeutet, Sie eine ID nur einmal auf einer Seite verwenden können. Wenn Sie es mehr als einmal verwenden, wird es alle Arten von Fehlern und Problemen für Sie verursachen. 3. ERBEN & SPEZIFIKATION: He! Sie haben das wahrscheinlich schon gehört, aber das Akronym für CSS steht für Cascading Stylesheets, und es funktioniert im Wesentlichen auf einer Wasserfall-Typ-Methode, bei der je weiter unten die Stile sind, desto wichtiger sind sie im Browser. Also, alles, was Sie oben geschrieben haben, wenn es einen Selektor gibt, der das Gleiche unten abzielt , wird sich dieser Stil gewöhnen. Dies kann nun linear von oben nach unten, aber auch in Bezug auf die Spezifität funktionieren . Je verschachtelter eine Klasse ist, desto spezifischer ist sie und daher umso wichtiger. Nun, in unserem Akkordeon, sehen wir dies den ganzen Weg durch unsere Stylesheets gezeigt, aber wir werden in unser HTML gehen , nur um einen kurzen kleinen Blick auf ein Beispiel zu werfen. Das erste Beispiel ist dieser Lektionstitel, dieser kleine Abschnitt hier, in dem wir sagen, welche Lektion wir haben. In diesem Abschnitt mit dem Titel der Lektion habe ich ihm eine Klasse und eine ID des Titels gegeben. Wenn wir in unser CSS gehen, können wir sehen, dass ich text-align angewendet habe: center auf die Lesson-title-Klasse. Nun, um Ihnen zu zeigen, wie die Vererbung mit Selektoren funktioniert , die von gleicher Wichtigkeit sind, werde ich eine zweite Instanz des Unterrichtstitels erstellen. Dies ist die gleiche Klasse, die auf dasselbe div angewendet wird. Sie sind von der gleichen Wichtigkeit, aber unsere zweite Instanz des Unterrichtstitels befindet sich weiter unten im Stylesheet, was bedeutet, dass sie unsere erste Instanz überschreibt. Wenn wir dies speichern und wir zurück auf unsere Seite gehen, können wir sehen, dass es im Moment text-align; center ist, was die ursprüngliche Klasse ist, aber wenn ich die Seite aktualisiere, können Sie sehen, dass diese zweite Instanz sie überschreibt und wendet Text ausrichten an: links. Jetzt sind Klassen wahrscheinlich der häufigste Selektor, den Sie in CSS verwenden werden, aber Sie haben wahrscheinlich auch die Verwendung von IDs hier und da gesehen. Wie der Name schon vermuten würde, ist eine ID ein sehr spezifischer eindeutiger Bezeichner, den Sie auf Ihren HTML-Code anwenden können , um ihn von anderen Elementen auf der Seite zu unterscheiden. Aber Sie müssen beachten, wie ich bereits sagte, dass Sie eine ID nur einmal auf einer Seite verwenden können und dass alle Stile, die Sie innerhalb der ID anwenden, alle Klassen- oder Elementebenenselektoren außer Kraft setzen , weil sie dass Sie eine ID nur einmal auf einer Seite verwenden können und dass alle Stile,die Sie innerhalb der ID anwenden, alle Klassen- oder Elementebenenselektoren außer Kraft setzen, weil sie ein höheres Maß an Bedeutung in CSS. Also, gehen wir zurück in unser CSS und ich werde zeigen, was ich meine. Wir werden unsere zweite Instanz der Unterrichts-Titel-Klasse loswerden. Das brauchen wir im Moment nicht. Sie können hier oben sehen, wenn ich es wieder kommentiere, habe ich die Titel-ID mit Hash und dann den Namen der ID ausgewählt, die in diesem Fall Titel ist, und ich habe Text ausrichten rechts darauf angewendet. Wenn ID und Klassen nun die gleiche Wichtigkeit haben, würde es der kaskadierenden Stil-Vererbung folgen , die normale Klassen tun. Wenn das der Fall war, sollte die Textausrichtung zentriert sein, da sie weiter unten auf der Seite liegt. Aber da in CSS-IDs eine höhere Wichtigkeit erhalten, können wir auf unserer Seite sehen, dass, wenn ich es aktualisiere, es tatsächlich nach rechts geht, obwohl wir diesen Stil höher auf der Seite geschrieben haben , weil es ein ID und es hat eine höhere Wichtigkeit in CSS, es überschreibt alles, was darunter ist, und gilt für dieses spezifische div. Wenn ich an größeren Projekten arbeite, vermeide ich normalerweise IDs so weit wie möglich in meinem CSS zu verwenden, da es eine zusätzliche Komplexität mit solider Vererbung und Spezifität schafft. Viel Zeit, junge Entwickler oder Entwickler, die gerade erst anfangen, werden versuchen, etwas wie eine ID zu verwenden, die einen höheren Wert hat , um Probleme zu überschreiben, die sie in ihrem Code haben. Ich ermutige Sie wirklich, wirklich, das nicht zu tun. Sie werden nur mehr Herzschmerz für sich selbst schaffen, wenn dieses Problem wieder kommt und Sie werden einen anderen Weg finden müssen, um es zu überschreiben. Es ist immer besser, das Problem aus seinem Kern zu lösen, anstatt Brute-Force-Taktiken wie IDs zu verwenden. 4. VERSCHACHTELTER VS. GLOBALER STIL: Eine der Fragen, die mir in meinem letzten Kurs gestellt wurde, war der Unterschied zwischen einem globalen Stil und einem verschachtelten Stil in Bezug auf die Spezifität. Also werden wir uns das jetzt kurz ansehen. Sie können hier Akkordeon im Browser sehen, es ist nur eine Reihe von Ziehungen, mit verschiedenen Arten von Inhalten überall. Wenn ich also in meine Indexdatei gehe, können Sie sehen, dass ich die Wickelklasse von Akkordeon habe, die den ganzen Weg um sie herum geht. Dann haben wir einen Container für jede unserer Ziehungen mit der Klassenauslosung, und im Inneren haben wir Etiketten und Beschreibungen. Jetzt, in unserem CSS, können Sie sehen, dass ich die Klassenzeichnung geschrieben habe und ihm den Stil der Cursor-Zeigerumrandung unten zwei Pixel einfarbig weiß gegeben habe. Nun, da dieser Klasse nichts vorausgeht, ist es eine globale Klasse. Was das bedeutet, ist, dass, egal wie oft ich diese Klasse auf der Seite verwende, und egal, wofür ich sie verwende, auch wenn es kein Unentschieden sein soll, diese Stile angewendet werden. Also, wenn ich zum Beispiel schreiben, transformieren, 5 Grad drehen würde, und ich werde das speichern und wir werden einen Blick werfen. Sie können sehen, dass jede der Ziehungen um 5 Grad gedreht wurde. Nun, ich weiß, das sieht ein bisschen dämlich aus, aber es ist nur ein Beispiel. Also, jetzt, offensichtlich, hat jeder unserer Dibz die Klassenauslosung, also macht das Sinn, dass es das tun würde. Aber was ist, wenn wir hier oben in unserem Titel die Klassenauslosung schreiben würden? Es ist nicht in unserem Akkordeon, aber wenn wir es auffrischen, wird der gleiche Stil angewendet. Jetzt können globale Klassen sehr nützlich sein, denn zum Beispiel haben Sie eine enthaltende Klasse, die Sie immer und immer verwenden möchten, oder ein Basis-Styling. Angenommen, Sie möchten, dass alle Ihre Links eine rote Farbe haben. Das kann sehr nützlich sein. Aber es kann auch sehr frustrierend sein, sagen Sie, wenn Sie eine mehrseitige Website erstellen, und Sie versehentlich eine Klasse wiederverwenden, die wie ein sehr allgemeiner Klassenname klingt, aber Sie wollten es nicht. Sagen Sie so etwas wie ein Label, sagen Sie, wir haben das Klassenlabel hier. In diesem Fall verwenden wir das Label als diesen grünen Abschnitt in einer Zeichnung, aber Sie könnten eine Beschriftung im Kontext eines Formulars oder eines Bildes oder eines Quiz verwenden . So könnten Sie eine 100-seitige Website haben und Etiketten an allen verschiedenen Arten von Orten verwenden. Aber Sie möchten vielleicht nicht unbedingt, dass sie alle einen grünen Hintergrund und weißen Text haben. Das ist, wenn das Verschachteln sehr nützlich wird. In unserem Index können Sie also sehen, dass unser Label von einem übergeordneten Div enthalten ist, das die Kostenziehung hat. Also haben wir die globale Klasse der Zeichnung, einen Raum, und dann das Label der Studie und wir haben unsere Stile angewendet. Also, jetzt, wenn ich in unser HTML gehen würde, und ich werde losziehen, und lasst uns Etikett schreiben und aktualisieren, und nichts passiert. Dies ist ein Label für die Website technisch, aber es wird nicht den grünen Hintergrund gegeben, weil es verschachtelt wurde. Also, es sei denn, Sie haben diesen Zeichnungscontainer außerhalb der Beschriftung, werden diese Stile nicht angewendet. Nun eine gute Sache zu erinnern, wenn Sie Klassen haben, sagen wir wie mit unserem Label und unserer Beschreibung, haben wir verschiedene Stile auf jede dieser Klassen angewendet, aber es kann Dinge geben, die Sie teilen möchten. Eine Sache, die Sie tun können, wenn Sie Ihre Klassen getrennt halten möchten, aber bestimmte Stile anwenden möchten, die gleich sind, können Sie Klassen tatsächlich verketten, indem Sie sie durch ein Komma trennen. Also, ich habe die Zeichnung und das Etikett, und dann zeichnen und Beschreibung, und ich möchte ihnen beide einen Rand von einem Pixel einfarbig rot geben, wir haben sie zusammengekettet. So haben nun sowohl das Etikett als auch die Beschreibung einen Rahmen erhalten. Zu wissen, wann ein globaler Stil im Vergleich zu einem verschachtelten Stil verwendet werden soll, hängt von Ihnen als Entwickler ab und Sie bewerten Ihren speziellen Anwendungsfall. Ein globaler Stil ist ideal für Dinge, die Sie immer und immer wieder in Ihrer Website wiederverwenden möchten , aber ein verschachtelter Stil würde ich für die meisten Ihrer Stile empfehlen , sie in die verschachtelten Szenarien zu setzen , so dass sie sind nicht an Orten auslaufen, die Sie nicht wollen, sondern auch im Auge zu behalten, dass, wenn Sie zu viele Ebenen in einem verschachtelten Stil nach unten gehen, es zu spezifisch und zu zerbrechlich werden kann, so dass Sie nicht in der Lage sein, es überall auf Ihrer Website wiederverwenden. Eine allgemeine gute Faustregel ist drei Ebenen der Verschachtelung Maximum, so dass Sie die Flexibilität behalten, immer und immer mehr Stil zu können, aber nicht so flexibel, dass sie überall auf der Seite verwendet werden können. 5. UNIVERSELLE SELEKTOREN: Ein universeller Selektor ist ein ziemlich einfaches Konzept und es bedeutet wörtlich, dass Sie Stile auf alles auf der Seite anwenden können, so dass der Stil universell ist. Nun, in CSS, wenn wir in CSS gehen, können Sie sehen, dass der universelle Selektor in CSS angewendet wird , indem Sie nur einen Asterix verwenden, und Sie können sehen, dass in unserem Code und Beispiel ich den universellen Selektor verwendet habe, um eine Schriftfamilie von san-Seriif, wenn ich das auskommentiere und speichere es. Schauen wir uns mal an. Sie können sehen, dass es in seine ursprüngliche Form zurückgeht. Also, durch die Anwendung dieser Art der Schriftfamilie san-Seriif, es ist alles auf der Seite betroffen. Überall, wo es eine Schriftart gibt, hat es die Schriftart geändert. Ich habe es auch verwendet, um Box-Dimensionierung auf Border-Box zu setzen, was ich Ihnen empfehlen würde, mit jeder einzelnen Ihrer Websites, die Sie erstellt haben, zu tun. Ich werde nicht darauf eingehen, was Box-Sizing tatsächlich in dieser Klasse tut. Ich habe das in meiner ursprünglichen How to Build a Website-Klasse behandelt, so dass Sie dorthin gehen können, wenn Sie mehr darüber erfahren möchten, was diese Eigenschaft tatsächlich tut. 6. KOMBINATOREN: Der nächste Schritt, den wir abdecken werden, sind Kombinatoren. Jetzt haben Sie tatsächlich Kombinatoren verwendet, vielleicht ohne es zu merken, wenn Sie zuvor irgendeine Art von CSS geschrieben haben. Ein Kombinator ist im Grunde ein Weg, mit dem Sie Elemente auf einer Seite abzielen können , abhängig davon, was ihm vorangeht und folgt. Also, es sind vier Haupttypen von Kombinatoren, die wir uns ansehen werden, und diese sind: Nachkommen, Kind, benachbarte Geschwister und allgemeine Geschwister. Nun, ein Nachkommen-Kombinator, Sie wahrscheinlich schon früher benutzt haben, vielleicht wussten Sie einfach nicht, wie es heißt. Es ist wahrscheinlich der häufigste Kombinator , der einfach ein Leerzeichen zwischen zwei Klassen hinzufügt, so dass Sie alle Übereinstimmungselemente ansprechen können, die ein Nachkommen einer bestimmten Klasse sind. Wenn wir in die CSS unseres Akkordeons gehen, können Sie das überall sehen. Also, ich werde zeichnen, um die Etiketten zu zielen, wir wollen die Beschreibung, das Bild ausrichten. Das heißt im Grunde, in der Zeichnung sollte alles, was das Klassenlabel hat diese Stile haben und das ist ein abgeleiteter Kombinator. Der nächste ist etwas spezifischer, und das ist ein untergeordneter Kombinator. Also, wie Sie hier auf der linken Seite sehen können, haben wir eine Elternklasse und den untergeordneten Absatz. Nun denken Sie vielleicht an sich selbst, wie sich das von einem Nachkommen unterscheidet. Nun, wenn wir wieder in unser CSS gehen, und wir schauen uns an. Werfen wir einen Blick in unseren Index eigentlich. Wenn wir in unsere erste Ziehung gehen, werden Sie sehen, dass in unserer Beschreibung wir zwei Absätze haben und dann haben wir eine Beschreibung Sub-Container mit einem weiteren Absatz darin. Wenn wir in den Browser gehen, können wir sehen, dass nur kommt aus wie drei Absätze. Nun, wenn wir in unser CSS gehen und wir zielen auf diese Absätze. Also lassen Sie uns sagen, zeichnen , Beschreibung und dann Absatz. Also, wir verwenden nur Nachkommen Selektoren für die Minute, und wir sagen, dass wir wollen, dass sie die Farbe Rot haben, einfach speichern Sie dies aus, wir aktualisieren unsere Seite, und alle Absätze innerhalb zeichnen auf allen Ebenen sind rot. Nun, das ist ein Nachkommen-Kombinator. Ein untergeordneter Kombinator, lassen Sie uns das kopieren, wählen Sie es nach unten. Wir werden diesen Nachkommen-Kombinator durch einen Kind-Kombinator ersetzen. Also benutzen wir nur einen kleinen Pfeil, um ein Kind zu sagen, und wir wollen, dass alle Kinder, die direkten Kinder die Farbe Lila haben. Nun, wenn wir wieder auf unsere Seite gehen und aktualisieren, können Sie sehen, dass die ersten beiden lila sind, aber die dritte ist immer noch rot. Also, lassen Sie uns in unsere DevTools gehen, und wir werden einen Blick darauf werfen, warum das so ist. Also, wenn wir uns unser HTML ansehen, können Sie sehen, während dieser untere Absatz ein Nachkomme der Beschreibung ist, ist es kein unmittelbares Kind, es ist eher wie ein Enkelkind, weil es unten auf einer dritten Ebene ist. Unser nächster Kombinator ist ein angrenzendes Geschwister. Also, das zielt auf das nächste Geschwister nach dem anfänglichen Selektor. Sie können es hier sehen. Wir haben das anfängliche Pluszeichen und dann das Geschwister, das ihm sofort folgt. Also, wir gehen zurück in unser CSS. In unserer dritten Ziehung, wenn wir hier nach unten gehen, können Sie sehen, dass Zeichnung drei hat einen Absatz und dann zwei Bilder. Um zu demonstrieren, was ein benachbarter Selektor tun würde, wenn wir unsere Zeichnung, Beschreibung, Absatz und dann das benachbarte Geschwister des Bildes verwenden , und wir werden einen 10 Rand von 10 Pixeln einfarbig schwarz um ihn legen. Also, was das bedeutet, ist jedes Absatz-Tag, das ein Nachkommen der Beschreibung ist. Wir wollen das unmittelbare Geschwister anvisieren, wenn es sich um ein Bild handelt. Also, wir werden das speichern, gehen Sie in unseren Browser. Sie können sehen, dass es nur auf dieses erste Bild ausgerichtet ist, aber es bleibt als das zweite Bild allein. Denn wenn Sie sich in unserem HTML erinnern, haben wir einen Absatz, ein Bild, ein Bild. Also, dieser hier ist das benachbarte Geschwister, es ist das nächste Geschwister nach dem Absatz-Tag. Wenn wir beide anvisieren wollten, würden wir das allgemeine Geschwister benutzen, das ist diese kleine Welle hier und die alle Geschwister auf dieser Ebene anvisiert. Also, lassen Sie uns das ausprobieren, wir werden das Plus durch unsere kleine Welle ersetzen und sparen. Aktualisieren Sie, öffnen Sie unsere Ziehung, und Sie können sehen, dass es beide Zielgruppen hat. 7. ATTRIBUTSELEKTOREN: Ein Attributselektor ist eine sehr praktische Möglichkeit für Sie, Elemente auf einer Seite basierend auf den Attributen, die Sie in Ihrem HTML deklariert haben, anzusprechen . Wenn wir also einen Blick auf unsere Indexdatei werfen, können Sie sehen, dass wir bereits alle verschiedenen Arten von Attributen haben. Eine ID ist ein Attribut, eine Klasse ist ein Attribut. Auf unseren Bildern ist die Quelle ein Attribut. Sie können hier auf den Ziehungen sehen, ich habe tatsächlich ein Datentypattribut enthalten. Dies ist sogar eine Möglichkeit, dass Sie Ihre eigenen benutzerdefinierten Attribute erstellen können , solange Sie sie mit Daten vorangestellt haben, und dann einen kleinen Bindestrich, können Sie es benennen, was auch immer Sie wollen. Also, vielleicht möchten Sie es nennen Datennamen oder Daten aktiv oder was auch immer Sie möchten. Aber wir werden für den Moment bei Datentyp bleiben. So wie Sie das in CSS anvisieren würden, habe ich gerade einige Informationen hier in die Datei kopiert , die sich in Ihren fertigen Projektdateien befindet. Es ist nur ein Auszug aus der W3Schools-Seite auf CSS-Selektoren, weil sie sich etwas schwer von oben aus zu erinnern sind. Aber im Wesentlichen ist die Art und Weise, wie Sie ein Attribut in Ihrem CSS anvisieren würden , zum Beispiel, wir wollten Outdraw mit diesem Datentypattribut ausrichten. Du könntest einfach die Klassenauslosung nennen. Dann würden Sie ohne Leerzeichen den Namen des Attributs schreiben, weil Sie dasselbe Element als Ziel verwenden möchten, auf dem sich die Zeichnung befindet . In diesem Fall möchte ich jede Ziehung mit dem Attributdatentyp anvisieren, unabhängig vom Wert des Datentyps. Lassen Sie uns also einen Rand von einem Pixel einfarbig rot geben, und wir werden das speichern und einen Blick werfen. Sie können sehen, dass es auf jede einzelne Ziehung ausgerichtet ist, da wir dieses Datentypattribut bei jeder Ziehung haben. Sagen Sie nun, dass Sie nur etwas von einem bestimmten Wert anvisieren möchten. Sie haben also Ihr Attribut des Datentyps, möchten aber nur diejenigen, die zum Beispiel vom Datentyp T01 sind, anvisieren. Also, wenn wir das speichern und aktualisieren, ist es jetzt nur auf diejenigen mit T01 ausgerichtet. Jetzt kann das sehr praktisch sein. Sie können es auf viele verschiedene Arten verwenden. Ich bin mir sicher, dass Sie beim Aufbau Ihrer Websites Wege finden werden, um dies zu verwenden. Vergessen Sie nicht, Sie können es auch in Kombination mit anderen Arten von Selektoren verwenden. Also, zum Beispiel mit einem abhängigen Selektor. Angenommen, wir wollen nur die Ziehungen anvisieren, die den Datentyp T01 haben, und wir wollen die Etiketten innerhalb dieser Ziehungen anvisieren und ihnen eine Hintergrundart Senf farbigen Hintergrund geben . können wir auch tun. Nun, wie Sie sehen, haben wir hier eine ziemlich praktische kleine Liste. Ein weiteres Beispiel ist die Verwendung dieser kleinen Welle, Sie können einen Teil dessen, was den Wert des Attributs ausmacht, anvisieren. Also, hier haben sie das Beispiel des Titels, enthält das Wort Blume. Wir könnten das in unserem Akkordeon benutzen, um ihre Bilder ins Visier zu bringen. Also, wenn wir sagen, zeichnen Bild und wir sagen, dass die Quelle sollte das Wort Fahrrad enthalten, zum Beispiel, wir wollen alle Bilder von Fahrrädern um fünf Grad drehen. Also, lassen Sie uns das speichern und aktualisieren und öffnen Sie unsere Zeichnung. Hoppla, und das hat nicht funktioniert. Der Grund dafür ist, dass ich Quelle anstelle von alt geschrieben habe , wo Sie die Beschreibung dessen schreiben würden, was das Bild ist. Also, wenn wir in unser HTML gehen, können Sie Alt Bike sehen, Alt Donuts, und wir wollen nur das Ziel Ziel, das das Wort Bike darin hat. Also, selbst wenn wir andere Wörter hinzufügen, blaues Fahrrad, und speichern, würde es immer noch auf das Fahrrad weil der Wert des alternativen Tags enthält das Wort Fahrrad. Ein weiterer nützlicher Attributwert ist dieser hier, wo Sie ein beliebiges Attribut ausrichten können, das Ihnen gefällt und das $ verwenden , um den Wert zu suchen und Attribute zu finden, die den Wert mit einem bestimmten Satz von Wörtern oder Buchstaben enden. So könnten wir zum Beispiel wieder nach Zeichnungsbild suchen. Lassen Sie uns dieses Mal die Quelle durchsuchen. Wir werden nach jedem Bild suchen, das das Ende von jpg innerhalb der Quelle hat. Wir werden Transformation anwenden, sagen wir, Maßstab 1.2. Also, das wird es um 20 Prozent skalieren. Wir speichern und aktualisieren. Sie können sehen, dass es in der Größe zugenommen hat. Nun, es gibt eine ganze Liste von verschiedenen Attributselektoren, die Sie verwenden können, und ich würde Sie wirklich ermutigen, mit ihnen herumzuspielen, einfach zu experimentieren und mit den verschiedenen Arten von Effekten, die Sie mit diesen Attributen erreichen können Selektoren. 8. PSEUDO KURSE: Nun ist Pseudo-Klasse ein Weg, mit dem Sie verschiedene Zustände in Ihrem HTML und CSS anvisieren können. Nehmen wir an, Sie haben so etwas wie einen Link, Sie würden eine Klasse für einen Elementselektor verwenden oder was auch immer Sie den Link in seinem Standardzustand stylen möchten, wie würde es sehen, wenn Sie die Seite laden. Wenn Sie jedoch den Mauszeiger über diesen Link zeigen möchten, möchten Sie möglicherweise, dass die Stile etwas anders sind. Möglicherweise möchten Sie, dass sie die Farbe ändert oder hervorgehoben oder unterstrichen wird. Sie würden also eine Pseudo-Klasse verwenden, um den Hover-Zustand dieses Elements zu zielen. Wenn wir in unser CSS gehen, habe ich nur ein paar Beispiele von Pseudoklassen eingefügt, die Sie verwenden können, einschließlich unseres Hovers, unseres Besuchten und des Vorher und Nachher. Wir werden nur einen kurzen Blick darauf werfen, wie Sie diese tatsächlich nutzen würden. Wir wissen also, dass wir in unserem Akkordeon unsere Schubladen mit unserem Etikett in der Beschreibung haben. Also, warum verwenden wir nicht den Hover-Zustand, um unser Label anzusprechen? Also, lasst uns zeichnen, beschriften und wir können Hover verwenden, indem wir einen kleinen Doppelpunkt machen, und dann den Namen der Pseudo-Klasse schreiben, geschweifte Klammern, und wir wollen, dass unsere Hintergründe zu dieser Senffarbe ändern , wenn wir halten über sie mit unserer Maus. Wenn ich das speichere, und wir aktualisieren, und Sie können sehen, dass der Effekt jetzt funktioniert. Eine andere Pseudoklasse, die ich ziemlich regelmäßig verwende, die ich erwähnen wollte, wäre vor und nach Pseudo-Klassen. Nun, das ermöglicht es Ihnen, den Status von/zu ändern oder Dinge auf beiden Seiten auf dem Vor- oder Nachher Ihres Elements hinzuzufügen . Also, sagen Sie mit unserem Unterrichtstitel, ein wenig h1 hier, was Sie tatsächlich tun können, ist, wenn ich den Lektionentitel und dann den Schraffurtitel anvisiere, ich kann die Pseudo-Klasse vorher verwenden, um tatsächlich Inhalte vor dem h1 hinzuzufügen. Also, wenn wir zum Beispiel sagen, ich wollte zwei Schrägstriche in einem Abstand hinzufügen, und ich möchte, dass die Farbe rosa haben, und ich möchte, dass es die Schriftgröße von 35 Pixeln hat. Sagen wir das und schauen wir uns an, was passiert. Sie können sehen, da es ist, es scheint. Also, wir haben eine Erweiterung unseres HTML in CSS geschrieben. Jetzt würde ich nicht empfehlen, HTML in Ihrem CSS zu schreiben, aber sagen Sie, Sie versuchen, benutzerdefinierte Formularfelder oder Eingabebuttons oder so etwas zu erstellen, es kann wirklich nützlich sein, dieses zusätzliche kleine bisschen etwas hinzuzufügen vor oder nach einem Element, das Sie stylen und anpassen können. Sie werden viele Beispiele dafür sehen, wie Sie beginnen, mehr kreative Funktionen Ihrer Website zu erstellen. 9. WAS NUN?: Da gehst du. Sie haben einen Blick auf einige der fortgeschritteneren ausgewählten Typen, die in CSS verfügbar sind. Ich hoffe, Sie haben einige neue Fähigkeiten gelernt und einige Experimente mit Ihrer Codierung gemacht , um zu sehen, welche Art von Stilen Sie finden. Ich würde gerne die Arbeit sehen, die Sie getan haben, im Abschnitt Projekte unten. Also, stellen Sie sicher, dass Sie Screenshots, Code-Snippets hochladen , was immer Sie wollen, ich würde es gerne sehen. Wenn du in Zukunft mehr Kurse für mich sehen möchtest, folge mir auf Skillshare und Social Media und ich werde dich wissen lassen, wenn ich neue Klassen aktualisiere. Wenn Sie etwas haben, über das Sie wirklich erfahren möchten, stellen Sie sicher, dass Sie unten kommentieren oder mich twittern oder was auch immer Sie wollen. Sagen Sie mir, worüber Sie gerne erfahren möchten, und ich kann unbedingt versuchen, einen Kurs darüber für Sie zu machen. Wenn du dich extra süß fühlst, kannst du eine Rezension auf diesem Kurs hinterlassen, das würde mir wirklich helfen. Ich hoffe, Sie haben die Klasse genossen und wir sehen uns nächstes Mal.