Inhaltsverzeichnis
这是一个标题,请查看优先级
有行内样式,所以它显示为了蓝色;
Heim Web-Frontend Front-End-Fragen und Antworten Enthalten Selektoren in CSS Hypertext-Tag-Selektoren?

Enthalten Selektoren in CSS Hypertext-Tag-Selektoren?

Sep 01, 2022 pm 05:25 PM
css 选择器 基本选择器

Nicht im Lieferumfang enthalten. Zu den CSS-Selektoren gehören: 1. Tag-Selektor, der bestimmte HTML-Elemente anhand des Elementnamens der HTML-Seite findet; 2. Klassen-Selektor, der bestimmte HTML-Elemente anhand des Werts des Klassenattributs des HTML-Elements findet; welche bestimmte HTML-Elemente über den Wert des id-Attributs des HTML-Elements lokalisieren. 4. Der Platzhalter-Selektor „*“ kann auf alle Arten von Tag-Elementen verweisen, einschließlich benutzerdefinierter Elemente. 5. Der Attribut-Selektor verwendet den vorhandenen Attributnamen des HTML-Element oder Attributwert zum Auffinden bestimmter HTML-Elemente.

Enthalten Selektoren in CSS Hypertext-Tag-Selektoren?

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

CSS-Selektoren enthalten keine „Hypertext-Tag-Selektoren“, sondern Klassenselektoren, Tag-Selektoren, ID-Selektoren, Attributselektoren, Pseudoklassenselektoren usw.

css Was ist ein Selektor? Stil ist die kleinste Syntaxeinheit von CSS. Jeder Stil besteht aus zwei Teilen: Selektor und Deklaration (Regel), wie in der Abbildung unten gezeigt.

1. Selektor (Selektor) Enthalten Selektoren in CSS Hypertext-Tag-Selektoren?

Der Selektor besteht aus der ID des HTML-Elements, dem Klassenattribut oder dem Elementnamen selbst und einigen speziellen Symbolen, die verwendet werden, um anzugeben, für welches HTML-Element der Stil definiert werden soll , wie zum Beispiel „Selektor p“ bedeutet, Stile für alle

-Tags auf der Seite zu definieren Wähler. Alle Deklarationen werden in einem Paar geschweifter Klammern { direkt nach dem Selektor platziert. Eine Anweisung muss zwei Teile enthalten: Attribute und Attributwerte, und ein Semikolon muss verwendet werden, um das Ende einer Anweisung zu markieren. Bei der letzten Anweisung in einem Stil kann das Semikolon weggelassen werden.

  • Attribut: Der Stilname, den Sie für das HTML-Element festlegen möchten, bestehend aus einer Reihe von Schlüsselwörtern, wie z. B. Farbe, Rahmen, Schriftart (Schriftart). ) usw. CSS bietet viele Attribute, die Sie auf der offiziellen W3C-Website anzeigen können.

  • Wert: besteht aus einem numerischen Wert und einer Einheit oder einem Schlüsselwort, mit dem der Anzeigeeffekt eines bestimmten Werts gesteuert wird Der Wert des Farbattributs kann beispielsweise Rot oder #F1F1F1 usw. sein.

Was sind die CSS-Selektoren?

{ }内,然后整体紧邻选择器的后面。

声明必须包括两部分:属性和属性值,并用分号来标识一个声明的结束,在一个样式中最后一个声明可以省略分号。

  • 属性:您希望给 HTML 元素设置的样式名称,由一系列关键词组成,例如 color(颜色)、border(边框)、font(字体)等,CSS 中提供了众多属性,您可以通过 W3C 官网查看;

  • 值:由数值和单位或者关键字组成,用来控制某个属性的显示效果,例如 color 属性的值可以是 red 或 #F1F1F1 等。

css选择器有哪些?

我们从一个Html结构开始

<div id="box">
    <div class="one">
        <p class="one_1">
        </p >
        <p class="one_1">
        </p >
    </div>
    <div class="two"></div>
    <div class="two"></div>
    <div class="two"></div>
</div>
Nach dem Login kopieren

关于css常用的选择器有:

  • id选择器(#box),选择id为box的元素

  • 类选择器(.one),选择类名为one的所有元素

  • 标签选择器(div),选择标签为div的所有元素

  • 后代选择器(#box div),选择id为box元素内部所有的div元素

  • 子选择器(.one>one_1),选择父元素为.one的所有.one_1的元素

  • 相邻同胞选择器(.one+.two),选择紧接在.one之后的所有.two元素

  • 群组选择器(div,p),选择div、p的所有元素

还有一些使用频率相对没那么多的选择器:

  • 伪类选择器

:link :选择未被访问的链接
:visited:选取已被访问的链接
:active:选择活动链接
:hover :鼠标指针浮动在上面的元素
:focus :选择具有焦点的
:first-child:父元素的首个子元素
Nach dem Login kopieren
  • 伪元素选择器

:first-letter :用于选取指定选择器的首字母
:first-line :选取指定选择器的首行
:before : 选择器在被选元素的内容前面插入内容
:after : 选择器在被选元素的内容后面插入内容
Nach dem Login kopieren
  • 属性选择器

[attribute] 选择带有attribute属性的元素
[attribute=value] 选择所有使用attribute=value的元素
[attribute~=value] 选择attribute属性包含value的元素
[attribute|=value]:选择attribute属性以value开头的元素
Nach dem Login kopieren

在CSS3中新增的选择器有如下:

  • 层次选择器(p~ul),选择前面有p元素的每个ul元素

  • 伪类选择器

:first-of-type 表示一组同级元素中其类型的第一个元素
:last-of-type 表示一组同级元素中其类型的最后一个元素
:only-of-type 表示没有同类型兄弟元素的元素
:only-child 表示没有任何兄弟的元素
:nth-child(n) 根据元素在一组同级中的位置匹配元素
:nth-last-of-type(n) 匹配给定类型的元素,基于它们在一组兄弟元素中的位置,从末尾开始计数
:last-child 表示一组兄弟元素中的最后一个元素
:root 设置HTML文档
:empty 指定空的元素
:enabled 选择可用元素
:disabled 选择被禁用元素
:checked 选择选中的元素
:not(selector) 选择与 <selector> 不匹配的所有元素
Nach dem Login kopieren
  • 属性选择器

[attribute*=value]:选择attribute属性值包含value的所有元素
[attribute^=value]:选择attribute属性开头为value的所有元素
[attribute$=value]:选择attribute属性结尾为value的所有元素
Nach dem Login kopieren

css基本选择器和优先级

css基本选择器

Wir beginnen mit einer HTML-Struktur
#nav-global > ul > li > a.nav-link
Nach dem Login kopieren
Nach dem Login kopieren
Häufig verwendete Selektoren für CSS sind:
id selector (#box ), Wählen Sie das Element mit der ID von Box aus Klassenselektor (.one), wählen Sie alle Elemente mit dem Klassennamen eins aus
  • Tag-Selektor (div), wählen Sie Alle Elemente aus mit dem Tag div 🎜🎜🎜🎜Typselektor/ Elementselektor🎜🎜🎜 Auch als Typselektor bekannt. Dieser grundlegende Selektor sucht anhand der Elemente des HTML-Seitennamens nach bestimmten HTML-Elementen. Wenn der Typselektor allein verwendet wird, findet er alle Elemente mit diesem Elementnamen in der aktuellen HTML-Seite. 🎜🎜🎜🎜Klassenselektor🎜🎜 findet bestimmte HTML-Elemente anhand des Werts des Klassenattributs des HTML-Elements. Die Verwendung dieses Basisselektors erfolgt in der Form .Klassenname. 🎜🎜🎜🎜Der ID-Selektor🎜🎜 ähnelt dem Klassenselektor, da er HTML-Elemente basierend auf einem bestimmten Attribut abgleicht. Der Klassenselektor entspricht dem Klassenselektor, während der ID-Selektor dem ID-Attribut entspricht. Es ist erwähnenswert, dass das ID-Attribut das einzige nicht wiederholbare Attribut auf der gesamten Seite ist. 🎜🎜🎜🎜🎜Universeller Selektor/Wildcard-Selektor🎜
    选择器名称描述

    类型选择器/元素选择器

    又称为 类型选择器,这种基本选择器是通过HTML页面的元素名定位具体HTML元素。如果类型选择器单独使用的话,会定位当前HTML页面中所有该元素名的元素。
    类选择器是通过HTML元素的class属性的值定位具体HTML元素。这种基本选择器的用法是 .类名
  • Descendant Selector (#box div), alle div-Elemente mit der ID innerhalb des Box-Elements auswählen

  • 🎜Child Selector (.one> one_1), wählt alle .one_1-Elemente aus, deren übergeordnetes Element .one🎜 ist
  • 🎜Angrenzender Geschwisterselektor (.one+.two), wählt alle .two-Elemente aus, die unmittelbar auf .one🎜 folgen< /li>
  • 🎜Gruppenselektor (div, p), wählt alle Elemente von div und p aus🎜
  • 🎜Es gibt auch einige Selektoren, die weniger häufig verwendet werden: 🎜
    • 🎜Pseudoklassenselektor🎜
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>这是一个demo</title>
        <style>
            #myid{color:red;}
            .myclass1{color:yellow;}
            h1,p {color:green;}
    
        </style>
    
        <body>
            <h1 id="这是一个标题-请查看优先级">这是一个标题,请查看优先级</h1>
            <p id="myid">这是一个段落,请查看优先级</p>
        </body>
    </head>
    </html>
    Nach dem Login kopieren
    Nach dem Login kopieren
    • 🎜 Pseudoelementselektor 🎜
    rrreee
    • 🎜Attribute-Selektor🎜
    rrreee🎜 in CSS3 Die neuen Selektoren lauten wie folgt: 🎜
    • 🎜Hierarchischer Selektor (p~ul), wählt jedes ul-Element aus, dem ein p-Element vorangestellt ist🎜
    • 🎜Pseudoklassenselektor🎜
    rrreee
    • 🎜Attribute-Selektor🎜
    rrreee🎜🎜🎜css-Basisselektor und Priorität🎜🎜🎜🎜🎜css-Basisselektor🎜🎜< table width="-153">
    Selektorname< /th>Beschreibung
    是一个星号(*),这个选择器是一个特殊的标签选择器,它可以指代所有类型的标签元素,包括自定义元素,以及

    Heiße KI -Werkzeuge

    Undresser.AI Undress

    Undresser.AI Undress

    KI-gestützte App zum Erstellen realistischer Aktfotos

    AI Clothes Remover

    AI Clothes Remover

    Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

    Undress AI Tool

    Undress AI Tool

    Ausziehbilder kostenlos

    Clothoff.io

    Clothoff.io

    KI-Kleiderentferner

    AI Hentai Generator

    AI Hentai Generator

    Erstellen Sie kostenlos Ai Hentai.

    Heißer Artikel

    R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
    3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O. Beste grafische Einstellungen
    3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
    4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
    WWE 2K25: Wie man alles in Myrise freischaltet
    1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌

    Heiße Werkzeuge

    Notepad++7.3.1

    Notepad++7.3.1

    Einfach zu bedienender und kostenloser Code-Editor

    SublimeText3 chinesische Version

    SublimeText3 chinesische Version

    Chinesische Version, sehr einfach zu bedienen

    Senden Sie Studio 13.0.1

    Senden Sie Studio 13.0.1

    Leistungsstarke integrierte PHP-Entwicklungsumgebung

    Dreamweaver CS6

    Dreamweaver CS6

    Visuelle Webentwicklungstools

    SublimeText3 Mac-Version

    SublimeText3 Mac-Version

    Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

    So ändern Sie Bootstrap So ändern Sie Bootstrap Apr 07, 2025 pm 03:18 PM

    Um die Größe der Elemente in Bootstrap anzupassen, können Sie die Dimensionsklasse verwenden, einschließlich: Einstellbreite:.

    So fügen Sie Bilder auf Bootstrap ein So fügen Sie Bilder auf Bootstrap ein Apr 07, 2025 pm 03:30 PM

    Es gibt verschiedene Möglichkeiten, Bilder in Bootstrap einzufügen: Bilder direkt mit dem HTML -IMG -Tag einfügen. Mit der Bootstrap -Bildkomponente können Sie reaktionsschnelle Bilder und weitere Stile bereitstellen. Legen Sie die Bildgröße fest und verwenden Sie die IMG-Fluid-Klasse, um das Bild anpassungsfähig zu machen. Stellen Sie den Rand mit der img-beliebten Klasse ein. Stellen Sie die abgerundeten Ecken ein und verwenden Sie die IMG-Rund-Klasse. Setzen Sie den Schatten, verwenden Sie die Schattenklasse. Größen Sie die Größe und positionieren Sie das Bild im CSS -Stil. Verwenden Sie mit dem Hintergrundbild die CSS-Eigenschaft im Hintergrund.

    So verwenden Sie die Bootstrap -Taste So verwenden Sie die Bootstrap -Taste Apr 07, 2025 pm 03:09 PM

    Wie benutze ich die Bootstrap -Taste? Führen Sie Bootstrap -CSS ein, um Schaltflächenelemente zu erstellen, und fügen Sie die Schaltfläche "Bootstrap" hinzu, um Schaltflächentext hinzuzufügen

    So richten Sie das Framework für Bootstrap ein So richten Sie das Framework für Bootstrap ein Apr 07, 2025 pm 03:27 PM

    Um das Bootstrap -Framework einzurichten, müssen Sie die folgenden Schritte befolgen: 1. Verweisen Sie die Bootstrap -Datei über CDN; 2. Laden Sie die Datei auf Ihrem eigenen Server herunter und hosten Sie sie. 3.. Fügen Sie die Bootstrap -Datei in HTML hinzu; 4. Kompilieren Sie Sass/weniger bei Bedarf; 5. Importieren Sie eine benutzerdefinierte Datei (optional). Sobald die Einrichtung abgeschlossen ist, können Sie die Grid -Systeme, -Komponenten und -stile von Bootstrap verwenden, um reaktionsschnelle Websites und Anwendungen zu erstellen.

    So schreiben Sie geteilte Zeilen auf Bootstrap So schreiben Sie geteilte Zeilen auf Bootstrap Apr 07, 2025 pm 03:12 PM

    Es gibt zwei Möglichkeiten, eine Bootstrap -Split -Zeile zu erstellen: Verwenden des Tags, das eine horizontale Split -Linie erstellt. Verwenden Sie die CSS -Border -Eigenschaft, um benutzerdefinierte Style Split -Linien zu erstellen.

    Die Rollen von HTML, CSS und JavaScript: Kernverantwortung Die Rollen von HTML, CSS und JavaScript: Kernverantwortung Apr 08, 2025 pm 07:05 PM

    HTML definiert die Webstruktur, CSS ist für Stil und Layout verantwortlich, und JavaScript ergibt eine dynamische Interaktion. Die drei erfüllen ihre Aufgaben in der Webentwicklung und erstellen gemeinsam eine farbenfrohe Website.

    So sehen Sie das Datum der Bootstrap So sehen Sie das Datum der Bootstrap Apr 07, 2025 pm 03:03 PM

    ANTWORT: Sie können die Datumsauswahlkomponente von Bootstrap verwenden, um Daten auf der Seite anzuzeigen. Schritte: Stellen Sie das Bootstrap -Framework ein. Erstellen Sie ein Eingangsfeld für Datumsauswahl in HTML. Bootstrap fügt dem Selektor automatisch Stile hinzu. Verwenden Sie JavaScript, um das ausgewählte Datum zu erhalten.

    So verwenden Sie Bootstrap in Vue So verwenden Sie Bootstrap in Vue Apr 07, 2025 pm 11:33 PM

    Die Verwendung von Bootstrap in Vue.js ist in fünf Schritte unterteilt: Startstrap installieren. Bootstrap in main.js. Verwenden Sie die Bootstrap -Komponente direkt in der Vorlage. Optional: benutzerdefinierter Stil. Optional: Verwenden Sie Plug-Ins.

    See all articles