Heim > Artikel > Web-Frontend > Mehrere Verwendungsmöglichkeiten von CSS3-Attributselektoren (Codebeispiele)

Mehrere Verwendungsmöglichkeiten von CSS3-Attributselektoren (Codebeispiele)

易达Original: 2020-06-09 18:05:072631Durchsuche

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>

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;
}

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;
}

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;
}

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;
}

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;
}

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;
}

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;
}

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;
}

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;
}

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>

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!

Stellungnahme：

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

Vorheriger Artikel：Hintergrundbild in CSS3 implementiert mehrere Hintergrundbilder (Codebeispiel)Nächster Artikel：Hintergrundbild in CSS3 implementiert mehrere Hintergrundbilder (Codebeispiel)

In Verbindung stehende Artikel

Mehr sehen