Wählen Sie untergeordnete Elemente mithilfe von CSS aus-CSS-Tutorial-php.cn

Heim

Web-Frontend

CSS-Tutorial

Wählen Sie untergeordnete Elemente mithilfe von CSS aus

王林

Aug 31, 2023 pm 07:53 PM

Der untergeordnete CSS-Kombinator wird verwendet, um alle untergeordneten Elemente eines übergeordneten Elements auszuwählen. Die Syntax des untergeordneten

CSS-Kombinators lautet wie folgt:

Selector > Selector {
   attribute: /*value*/
}

Der untergeordnete CSS-Kombinator wird verwendet, um alle untergeordneten Elemente des übergeordneten Elements auszuwählen.

Die Syntax des CSS-Nachkommenkombinators lautet wie folgt:

Selector Selector {
   attribute: /*value*/
}

Beispiel

Das folgende Beispiel demonstriert die untergeordneten und nachkommenden Selektoren von CSS.

Online-Demonstration

<!DOCTYPE html>
<html>
<head>
<style>
article > * {
   text-align: center;
   border: 10px groove tomato;
}
::first-line {
   box-shadow: inset 0 0 7px cornflowerblue;
}
</style>
</head>
<body>
<article>
<h2 id="Donec-rutrum-a-erat-vitae-interdum">Donec rutrum a erat vitae interdum. </h2>
<p>Duis consequat aliquet leo, quis aliquam ex vehicula in. Vivamus placerat tincidunt hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque semper ex eget nulla consectetur varius.</p>
<img  src="https://images.unsplash.com/photo-1612840666989- a16302e84978?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=120&ixlib=rb1.2.1&q=80&w=120" / alt="Wählen Sie untergeordnete Elemente mithilfe von CSS aus" >
</article>
</body>
</html>

Ausgabe

Dies führt zu den folgenden Ergebnissen:

Das obige ist der detaillierte Inhalt vonWählen Sie untergeordnete Elemente mithilfe von CSS aus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme

Dieser Artikel ist reproduziert unter:tutorialspoint. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Verwandter Artikel

Wöchentliche Plattformnachrichten: Verbesserung der UX auf langsamen Verbindungen, einem Tipp zum Schreiben von Alt -Text und einer Polyfill für das HTML -LadeattributApr 17, 2025 am 11:09 AM

In der Roundup in dieser Woche, wie man eine langsame Verbindung ermittelt, was wir für Bilder in Alt -Text einfügen sollten, und eine neue Polyfill für das HTML -Ladeattribut,

Wiederverwendbare Popovers, um einen kleinen Pop hinzuzufügenApr 17, 2025 am 11:02 AM

Ein Popover ist eine vorübergehende Ansicht, die oben auf einem Inhalt auf dem Bildschirm angezeigt wird, wenn ein Benutzer auf eine Steuertaste oder in einem definierten Bereich klickt. Zum Beispiel,

Styling -Links mit echten UntersteinenApr 17, 2025 am 10:57 AM

Bevor wir zu Stylen unterstreicht, sollten wir die Frage beantworten: Sollten wir unterstreichen?

Wöchentliche Plattformnachrichten: HTML -Ladeattribut, die Haupt -ARIA -Spezifikationen und Wechsel von Iframe zu Shadow DomApr 17, 2025 am 10:55 AM

In der Zusammenfassung der Plattformnachrichten in dieser Woche stellt Chrome ein neues Attribut für das Laden, Zugänglichkeitspezifikationen für Webentwickler und die BBC -Bewegungen ein

Multiplayer Tic Tac Toe mit GraphQLApr 17, 2025 am 10:54 AM

GraphQL ist eine Abfragesprache für APIs, die für Front-End-Entwickler sehr befähigt. Wenn die GraphQL -Site es erklärt, beschreiben Sie Ihre Daten und fragen Sie nach was

Logische Operationen mit CSS -VariablenApr 17, 2025 am 10:44 AM

Sehr oft, während Switch -Variablen verwendet (eine Variable, die entweder 0 oder 1 ist, ein Konzept, das in diesem Beitrag ausführlich erklärt wurde), wünschte ich, ich könnte es könnte

LAZY LOAD ENTRETTE YOUTUBE VIDEOSApr 17, 2025 am 10:40 AM

Dies ist eine sehr kluge Idee über Arthur Corezan. Anstatt die Standard -YouTube -Einbettung zu verwenden, die einer Seite eine Mistladung von Ressourcen hinzufügt, unabhängig davon, ob der Benutzer abgespielt wird

Können Sie den Cursor in CSS drehen?Apr 17, 2025 am 10:28 AM

Irgendwie! Es gibt keine einfache oder Standard -Möglichkeit, es zu tun, aber es ist möglich. Sie können den Cursor in verschiedene integrierte native Versionen mit CSS mit dem ändern

See all articles