Mehrere Verwendungsmöglichkeiten von CSS3-Attributselektoren (Codebeispiele)-CSS-Tutorial-php.cn

Inhaltsverzeichnis

Ziele dieses Artikels:

Fragen:

Heim

Web-Frontend

CSS-Tutorial

Mehrere Verwendungsmöglichkeiten von CSS3-Attributselektoren (Codebeispiele)

易达

Jun 09, 2020 pm 06:05 PM

css3

Ziele dieses Artikels:

1. Beherrschen Sie mehrere Verwendungsmöglichkeiten von Attributselektoren in CSS3

Fragen:

1 die folgenden Effekte, aber die Anforderungen Alle CSS-Dateien verwenden Attributselektoren, um Elementstile festzulegen

Mehrere Verwendungsmöglichkeiten von CSS3-Attributselektoren (Codebeispiele)

Zusätzliche Hinweise:

1 Die gesamte Div-Breite beträgt 850 und muss in der Mitte der Seite angezeigt werden

2. Die Titelgröße beträgt 28, die Fettschrift

3 Promi-Klatsch, springen Sie zu tobagua.html, klicken Sie auf Militärnachrichten. Springen Sie zu toaffairs.html

Jetzt führen wir die spezifische Operation durch

1. Da für diesen Fall keine zusätzlichen Materialien erforderlich sind , der Schritt der Vorbereitung der Materialien kann weggelassen werden

2. Erstellen Sie index.html und schreiben Sie die Architektur :

1. Das Ziel ist in zwei Teile unterteilt: links und rechts. Jeder Teil zeigt eine Liste von Nachrichten an, aber die Kategorie jeder Nachricht ist unterschiedlich und einige Stile sind auch unterschiedlich

2. Die Farbe der Nachrichten, die Ruby Lin enthalten, muss separat festgelegt werden

3. Die Farbe der Nachrichten muss ebenfalls separat festgelegt werden

4. Die Titel der beiden Teile müssen ebenfalls festgelegt werden müssen separat festgelegt werden, daher müssen einige Attribute für sie separat festgelegt werden, damit sie über den Attributselektor abgeglichen werden können

5. Da jeder Teil eine Liste ist, können wir ul verwenden, aber beide uls sind bündig. Daher müssen wir Float verwenden, um sicherzustellen, dass der äußere Container das Float-Element noch umschließen kann. Daher müssen Sie am Ende ein klares Element hinzufügen, um das Floating zu löschen Zur Analyse erhalten wir den folgenden Code:

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>属性选择器</title>
</head>

<body>
    <div container="true">
        <div left="true">
            <span title="true"><a href="tobagua.html">明星八卦</a></span>
            <ul>
                <li class="news lxr">->林心如女儿小海豚正面照被公开颜值撞脸年轻时的霍建华，太美了 </li>
                <li class="news">->倪萍还是胖点好，瘦下来后太显老了，一点精神没有穿衣也不好看！ </li>
                <li class="news">->汪小菲晒儿女沙滩上顽皮玩耍，儿子长高不少，女儿一身泥被指酷似奶奶张兰 </li>
                <li class="news">->伊能静给婆婆安排了个小次卧, 走进秦妈妈的表情变化让人心疼! </li>
            </ul>
        </div>
        <div right="true">
            <span title="true"><a href="toaffairs.html">军事新闻</a></span>
            <ul>
                <li class="affairs news f15">->F15E成为首型接收B61-12核弹的战斗机 </li>
                <li class="affairs news">->越南的骑兵警队，马略矮了点啊 </li>
                <li class="affairs news">->美军运输机降落时冲出跑道后撞墙起火 4人受伤 </li>
                <li class="affairs news">->不到一个月又出事：美军F-35降落时起落架折断 </li>
            </ul>
        </div>
        <div class="clear"> </div>
    </div>
</body>
</html>

Nach dem Login kopieren

3. Schreiben Sie den Stil, erstellen Sie einen CSS-Ordner und erstellen Sie darin einen neuen Index, wie die Stile darin geschrieben werden ist die Analyseidee

Denken Sie an die Analyse:

Alle Unterelemente des Containers

1 , da jeder Stil einen verwenden muss Der Attributselektor passt sich der Einstellung an. Daher besteht unsere Idee darin, zunächst das Element mit dem Attribut „container=true“ abzurufen und dann einige gängige Stile dafür festzulegen, z. B. den gebräuchlichsten Abstand und Rand, da es keine gibt Möglicherweise kennen Sie die Standardauffüllung einiger Elemente nicht. Damit Sie sich auf das Schreiben der Logik konzentrieren können, haben wir deren Auffüllung und Rand auf 0 vereinheitlicht.

Fügen Sie also den folgenden Code zu index.css hinzu:

div[container =true] *{
    padding:0;
    margin:0;
}

Nach dem Login kopieren

Container Container

1. Die Breite des äußersten Containers beträgt 850, er sollte mittig sein, oben, unten, links und rechts ist eine Polsterung vorhanden , mit einem grauen Rand, und die Standardschriftgröße ist 14px. Dies ist der Containercontainer, es ist das Element mit dem Containerattribut = true

, also fügen Sie den folgenden Code zu index.css hinzu:

div[container =true] {
   width: 850px;
   margin: 0 auto;
   font-size: 14px;
   border: 1px solid lightgray;
   padding: 10px;
}

Nach dem Login kopieren

2 öffentliche Titelstileinstellungen

1 Da die Titel zentriert sein müssen, mit einer Schriftgröße von 28 Pixeln und fetter Darstellung, welche sind das? Elemente mit dem Attribut title=true

Fügen Sie also den folgenden Code zu index.css hinzu:

span[title=true] {
   text-align: center;
   font-size: 28px;
   font-weight: bold;
}

Nach dem Login kopieren

Separate Einstellungen für 2 Titelverbindungen

1. Die Farbe des Klatschtitels ist rötlich

2. Die Farbe des Militärtitels ist blau

3. Das href-Attribut, das die Bagua-Zeichenfolge enthält, ist der Anfang des href-Attributs mit toaffairs ist die Titelverbindung auf der rechten Seite

*= bedeutet Inklusion, ^= bedeutet der Anfang

Fügen Sie also den folgenden Code zu index.css hinzu:

a[href *=bagua] {
   color: rgb(234, 84, 23);
}

a[href ^=toaffairs] {
   color: green;
}

Nach dem Login kopieren

Linke und rechte Floating-Div-Einstellungen

1 Das linke Div muss nach links schweben. Welches ist also das linke Div? 🎜>

2. Das rechte Div muss nach rechts schweben. Welches ist also das Div auf der rechten Seite? Es ist tatsächlich ein Div mit dem rechten Attribut true

3. Die Funktion ist clear Das Floating-Div ist tatsächlich dasjenige, dessen Klasse mit clear endet. Hinweis: $= gibt an, was mit

endet. Fügen Sie daher den folgenden Code zu index.css hinzu:

div[left =true] {
   float: left;
}

div[right =true] {
   float: right;
}

div[class $= clear] {
   clear: both;
   float: none;
   width: 0;
   height: 0;
}

Nach dem Login kopieren

li-Einstellungen

1. li enthält keine schwarzen Punkte, also list-style:none

2 Das Element, dessen Attributklasse die Nachrichtenzeichenfolge enthält, ist li

3. Je nach Effekt gibt es einen bestimmten Abstand zwischen oben, unten, links und rechts , also fügen Sie den folgenden Code zu index.css hinzu:

li[class =news] {
   list-style: none;
   height: 42px;
   line-height: 42px;
   padding:3px 10px;
}

Nach dem Login kopieren

Enthält die Titeleinstellungen von Ruby Lin

1. Die Farbe dieses Titels ist erdiges Gelb und die Schriftart ist fett

2. Das Klassenattribut endet mit lxr Ruby Lins Titel, also verwenden Sie $=

[class $=lxr]{
    color:peru;
    font-weight: bold;
}

Nach dem Login kopieren

Titeleinstellungen mit f15

1. Die Titelfarbe ist blau und die Schriftart ist fett

2. Titel, deren Klassenattribut die Zeichenfolge f15 enthält, legen den Titel für das Ziel fest. Verwenden Sie daher *=

[class*=f15]{
    color:blue;
    font-weight: bold;
}

Nach dem Login kopieren

Bisher lautet der gesamte Inhalt von index.css wie folgt:

div[container =true] *{
    padding:0;
    margin:0;
}
div[container =true] {
   width: 850px;
   margin: 0 auto;
   font-size: 14px;
   border: 1px solid lightgray;
   padding: 10px;
}

span[title=true] {
   text-align: center;
   font-size: 28px;
   font-weight: bold;
}

a[href *=bagua] {
   color: rgb(234, 84, 23);
}

a[href ^=toaffairs] {
   color: green;
}

div[left =true] {
   float: left;
}

div[right =true] {
   float: right;
}

div[class $= clear] {
   clear: both;
   float: none;
   width: 0;
   height: 0;
}

li[class *=news] {
   list-style: none;
   height: 42px;
   line-height: 42px;
   padding:3px 10px;
}
[class $=lxr]{
    color:peru;
    font-weight: bold;
}
[class*=f15]{
    color:blue;
    font-weight: bold;
}

Nach dem Login kopieren

Dann fügen Sie index.css in index.html ein

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>属性选择器</title>
    <link rel="stylesheet" type="text/css" href="css/index.css" /> 
</head>

<body>
    <div container="true">
        <div left="true">
            <span title="true"><a href="tobagua.html">明星八卦</a></span>
            <ul>
                <li class="news lxr">->林心如女儿小海豚正面照被公开颜值撞脸年轻时的霍建华，太美了 </li>
                <li class="news">->倪萍还是胖点好，瘦下来后太显老了，一点精神没有穿衣也不好看！ </li>
                <li class="news">->汪小菲晒儿女沙滩上顽皮玩耍，儿子长高不少，女儿一身泥被指酷似奶奶张兰 </li>
                <li class="news">->伊能静给婆婆安排了个小次卧, 走进秦妈妈的表情变化让人心疼! </li>
            </ul>
        </div>
        <div right="true">
            <span title="true"><a href="toaffairs.html">军事新闻</a></span>
            <ul>
                <li class="affairs news f15">->F15E成为首型接收B61-12核弹的战斗机 </li>
                <li class="affairs news">->越南的骑兵警队，马略矮了点啊 </li>
                <li class="affairs news">->美军运输机降落时冲出跑道后撞墙起火 4人受伤 </li>
                <li class="affairs news">->不到一个月又出事：美军F-35降落时起落架折断 </li>
            </ul>
        </div>
        <div class="clear"> </div>
    </div>
</body>
</html>

Nach dem Login kopieren

Das laufende Ergebnis ist:

Mehrere Verwendungsmöglichkeiten von CSS3-Attributselektoren (Codebeispiele)

Bisher wurden die erforderlichen Ergebnisse erzielt

Zusammenfassung:

1. Erklärt mehrere Verwendungsmöglichkeiten von Attributselektoren, z. B.

A=B bedeutet, dass der A-Attributwert gleich der B-Zeichenfolge ist

A*=B bedeutet, dass der A-Attributwert die B-Zeichenfolge enthält

A $=B Gibt an, dass der A-Attributwert mit der B-Zeichenfolge endet

A^=B gibt an, dass der A-Attributwert mit der B-Zeichenfolge beginnt

Das obige ist der detaillierte Inhalt vonMehrere Verwendungsmöglichkeiten von CSS3-Attributselektoren (Codebeispiele). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

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

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heißer Artikel

Assassin's Creed Shadows: Seashell Riddle -Lösung

3 Wochen vor By DDD

Was ist neu in Windows 11 KB5054979 und wie Sie Update -Probleme beheben

2 Wochen vor By DDD

Wo kann man die Kransteuerungsschlüsselkarten in Atomfall finden

3 Wochen vor By DDD

<🎜>: Dead Rails - wie man jede Herausforderung abschließt

4 Wochen vor By DDD

Atomfall Guide: Gegenstandsstandorte, Questführer und Tipps

4 Wochen vor By DDD

Heiße Werkzeuge

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Wo ist der Login-Zugang für Gmail-E-Mail?

7652

CakePHP-Tutorial

1393

Wie lautet das Format des Kontonamens von Steam?

Win11 -Aktivierungsschlüssel dauerhaft

NYT Mini Kreuzworträtsel Antworten

110

Related knowledge

Wie erzielt man mit reinem CSS3 einen Welleneffekt? (Codebeispiel) Jun 28, 2022 pm 01:39 PM

Wie erzielt man mit reinem CSS3 einen Welleneffekt? In diesem Artikel erfahren Sie, wie Sie mit SVG- und CSS-Animationen Welleneffekte erstellen.

Verwenden Sie CSS geschickt, um verschiedene seltsam geformte Schaltflächen zu realisieren (mit Code). Jul 19, 2022 am 11:28 AM

Dieser Artikel zeigt Ihnen, wie Sie mithilfe von CSS auf einfache Weise verschiedene seltsam geformte Schaltflächen realisieren können, die häufig vorkommen. Ich hoffe, dass er Ihnen hilfreich sein wird!

So verstecken Sie Elemente in CSS, ohne Platz zu beanspruchen Jun 01, 2022 pm 07:15 PM

Zwei Methoden: 1. Fügen Sie mit dem Anzeigeattribut einfach den Stil „display:none;“ zum Element hinzu. 2. Verwenden Sie die Attribute „position“ und „top“, um die absolute Positionierung des Elements festzulegen, um das Element auszublenden. Fügen Sie dem Element einfach den Stil „position:absolute;top:-9999px;“ hinzu.

So implementieren Sie Spitzenränder in CSS3 Sep 16, 2022 pm 07:11 PM

In CSS können Sie das Attribut „border-image“ verwenden, um einen Spitzenrand zu erzielen. Das Attribut „border-image“ kann Bilder zum Erstellen von Rändern verwenden, d. h. zum Hinzufügen eines Hintergrundbilds zum Rand. Sie müssen lediglich das Hintergrundbild als Spitzenstil angeben Bildrandbreite nach innen. Ob der Anfang wiederholt wird;".

So vergrößern Sie das Bild durch Klicken mit der Maus in CSS3 Apr 25, 2022 pm 04:52 PM

Implementierungsmethode: 1. Verwenden Sie den Selektor „:active“, um den Status des Mausklicks auf das Bild auszuwählen. 2. Verwenden Sie das Transformationsattribut und die Funktion „scale()“, um den Bildvergrößerungseffekt zu erzielen. Die Syntax „img:active {transform : Skala(x-Achsen-Vergrößerung, y-Achsen-Vergrößerung);}".

Es zeigt sich, dass Textkarussell und Bildkarussell auch mit reinem CSS realisierbar sind! Jun 10, 2022 pm 01:00 PM

Wie erstelle ich ein Textkarussell und ein Bildkarussell? Das erste, woran jeder denkt, ist die Verwendung von js. Tatsächlich können Textkarussell und Bildkarussell auch einen Blick auf die Implementierungsmethode werfen.

So legen Sie die Rotationsgeschwindigkeit der Animation in CSS3 fest Apr 28, 2022 pm 04:32 PM

In CSS3 können Sie das Attribut „animation-timing-function“ verwenden, um die Rotationsgeschwindigkeit der Animation festzulegen. Dieses Attribut wird verwendet, um anzugeben, wie die Animation einen Zyklus abschließt und die Geschwindigkeitskurve der Animation festlegt. Animation-Timing-Funktion: Geschwindigkeitsattributwert;}".

Hat der CSS3-Animationseffekt eine Verformung? Apr 28, 2022 pm 02:20 PM

Der Animationseffekt in CSS3 verfügt über eine Verformung. Sie können „Animation: Animationsattribut @keyframes ..{..{transform: Transformationsattribut}}“ verwenden, um den Animationsstil festzulegen Das Transformationsattribut wird zum Festlegen des Verformungsstils verwendet.

See all articles