Spezifische Verwendung von CSS-Inhaltsattributen

<Stil>
    *{Rand: 0;Polsterung: 0;Boxgröße: Rahmenbox;}
    li{Listenstil: keine;}
    .Inhalt{
        Position: relativ; Polsterung: 10px;
        Rand: 1px durchgezogen #666; Seitenrand: 10px;
    }
    .content.only-text::before{
        Inhalt: ,,Reine Zeichen einfügen';
    }
</Stil>

<Text>
    <h1>1. Reine Zeichen einfügen</h1>
    <div Klasse="Nur Inhalt-Text"></div>
</body>

<Stil>
    *{Rand: 0;Polsterung: 0;Boxgröße: Rahmenbox;}
    li{Listenstil: keine;}
    .Inhalt{
        Position: relativ; Polsterung: 10px;
        Rand: 1px durchgezogen #666; Seitenrand: 10px;
    }
    .content.fill-image::before{
        Inhalt: URL('https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_86d58ae1.png');
    }
</Stil>

<Text>
    <h1>2. Bilder einfügen</h1>
    <div Klasse = "Inhalt Füllbild"></div>
</body>

<Stil>
    *{Rand: 0;Polsterung: 0;Boxgröße: Rahmenbox;}
    li{Listenstil: keine;}
    .Inhalt{
        Position: relativ; Polsterung: 10px;
        Rand: 1px durchgezogen #666; Seitenrand: 10px;
    }
    .content.fill-dom-attr::vor{
        Inhalt: Attr(Datentitel);
    }
</Stil>

<Text>
    <h1>3. Elementattribute einfügen</h1>
    <div class="content fill-dom-attr" data-title="Ich bin der data-title-Attributwert des .fill-dom-attr-Elements"></div>
</body>

<Stil>
    *{Rand: 0;Polsterung: 0;Boxgröße: Rahmenbox;}
    li{Listenstil: keine;}
    .Inhalt{
        Position: relativ; Polsterung: 10px;
        Rand: 1px durchgezogen #666; Seitenrand: 10px;
    }
    .fill-dom-index li{
        Position: relativ;
        /* Geben Sie dem Zähler einen Namen. Es wird nur der Index des li-Tags hinzugefügt. Das div in der Mitte des li-Elements wird nicht berücksichtigt*/
        Gegeninkrement: mein;
    }
    .fill-dom-index li div::vor{
        /* Verwende den Rechner mit dem angegebenen Namen */
        Inhalt: Zähler (mein) '- ';
        Farbe: #f00;
        Schriftstärke: 600;
    }
</Stil>

<Text>
    <h1>4. Fügen Sie die aktuelle Elementnummer ein (d. h. den aktuellen Elementindex)</h1>
    <div Klasse="Inhalt füllen-dom-index">
        <ul>
            <li><div>Ich bin der erste Li-Tag</div></li>
            <div>Ich bin das erste Div-Tag im Li-Tag</div>
            <li><div>Ich bin der zweite Li-Tag</div></li>
            <li><div>Ich bin der dritte Li-Tag</div></li>
            <div>Ich bin das zweite Div-Tag im Li-Tag</div>
            <li><div>Ich bin der 4. Li-Tag</div></li>
            <li><div>Ich bin der 5. Li-Tag</div></li>
        </ul>
    </div>
</body>

<Stil>
    *{Rand: 0;Polsterung: 0;Boxgröße: Rahmenbox;}
    li{Listenstil: keine;}
    .Inhalt{
        Position: relativ; Polsterung: 10px;
        Rand: 1px durchgezogen #666; Seitenrand: 10px;
    }
    .fill-dom-index2 li{
        Position: relativ;
        Zählerinkrement: my2;
    }
    .fill-dom-index2 li div::vor{
        /* Der zweite Parameter ist List-Style-Type, verfügbare Werte sind wie folgt: http://www.w3school.com.cn/cssref/pr_list-style-type.asp*/
        Inhalt: Zähler (my2, Lower-Latin)'- ';
        Farbe: #f00;
        Schriftstärke: 600;
    }
</Stil>

<Text>
    <h1>5. Geben Sie die aktuelle Elementnummer ein (geben Sie den Typ an)</h1>
    <div Klasse="Inhalt füllen-dom-index2">
        <ul>
            <li><div>Ich bin der erste Li-Tag</div></li>
            <div>Ich bin das erste Div-Tag im Li-Tag</div>
            <li><div>Ich bin der zweite Li-Tag</div></li>
            <li><div>Ich bin der dritte Li-Tag</div></li>
            <div>Ich bin das zweite Div-Tag im Li-Tag</div>
            <li><div>Ich bin der 4. Li-Tag</div></li>
            <li><div>Ich bin der 5. Li-Tag</div></li>
        </ul>
    </div>
</body>