Teilen Sie die Verwendungsmethode des Standard-Pseudoklassenselektors

Der Standard-Pseudoklassenselektor kann nur für Formularelemente verwendet werden und stellt die Formularelemente im Standardzustand dar. Als nächstes wird Ihnen dieser Artikel eine Einführung in die Verwendung von CSS3: Standard-Pseudoklassenselektor geben. Interessierte Freunde können dem Herausgeber von Script House folgen und einen Blick darauf werfen.

1. Einführung in CSS3: Standard-Pseudoklassenselektor

CSS3: Standardpseudoklassenselektor kann nur für Formularelemente verwendet werden. Bedeutung: Standardstatus von Formularelementen.

Ein Dropdown-Feld kann beispielsweise mehrere Optionen haben. Standardmäßig erstellen wir eine 6ba2df10d72c8dd7cce65111d12f0430. Diese 6ba2df10d72c8dd7cce65111d12f0430 Im Standardzustand (z. B. „Option 4“ im Code unten) kann theoretisch der :default-Pseudoklassenselektor angewendet werden.

<select multiple>
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
    <option selected>选项4</option>
    <option>选项5</option>
    <option>选项6</option>
</select>

Angenommen, das CSS lautet wie folgt:

option:default {
    color: red;
}

Dann unter dem Chrome-Browser, wann Wir wählen Für andere Optionen können Sie sehen, dass Option 4 zu diesem Zeitpunkt rot ist. Der Effekt ist wie folgt:

Der Effekt im Firefox-Browser ist ähnlich:

IE-Browser unterstützt es nicht.

Daher kann die mobile Version bedenkenlos verwendet werden, und die Desktop-Version kann verwendet werden, ohne sich Gedanken über IE-Projekte machen zu müssen.

2. CSS3: Standard-Pseudoklassen-Auswahlfunktion

CSS3: Standard-Pseudoklassen-Auswahlfunktion ermöglicht Benutzern die Auswahl von Wann Wenn Sie über einen Datensatz verfügen, wissen Sie immer noch, was die Standardoption ist. Wenn es sonst zu viele andere Optionen gibt, wissen Sie nicht, welche standardmäßig bereitgestellt wird. Der Effekt ist nicht sehr stark, aber in kritischen Momenten nützlich.

3. Recherche zu einigen Funktionen von CSS3: Standard-Pseudoklassenselektor

1: Wird die schnelle Änderung von JS Auswirkungen haben? ?

Der Testcode lautet wie folgt:

:default {
  transform: sclae(1.5);
}
<input type="radio" name="city" value="0">
<input type="radio" name="city" value="1" checked>
<input type="radio" name="city" value="2">
<script>
document.querySelectorAll(&#39;[type="radio"]&#39;)[2].checked = true;
</script>

Das heißt, HTML legt fest, dass das zweite Optionsfeld um das 1,5-fache vergrößert wird, und JS legt es sofort fest Nachdem ich ein Optionsfeld ausgewählt hatte, stellte ich fest, dass die Darstellung des :default-Pseudoklassenselektors immer noch nicht beeinträchtigt wird, selbst wenn die JS-Änderung sehr schnell erfolgt.

Daher ist die Antwort auf diese Frage keine Auswirkung.

2. Studie 2: 6ba2df10d72c8dd7cce65111d12f0430 -Klassenselektor?

Zum Beispiel:

option:default {
    color: red;
}
<select name="city">
    <option value="-1">请选择</option>
    <option value="1">北京</option>
    <option value="2">上海</option>
    <option value="3">深圳</option>
    <option value="4">广州</option>
    <option value="5">厦门</option>
</select>

Die erste6ba2df10d72c8dd7cce65111d12f0430 ist nicht rot, wie unten gezeigt, daher für: Damit der Standardselektor wirksam ist, muss er auf „true“ gesetzt werden. Ebenso muss bei einzelnen Kontrollkästchen der überprüfte Wert ebenfalls wahr sein.

Daher ist die Antwort auf diese Frage keine Antwort.

4. Praktische Anwendung von CSS3 :default Pseudoklassenselektor

Obwohl der :default-Selektor zum Markieren des Standardzustands verwendet wird, sollten Sie dies vermeiden Wählen Sie Verschleierung. Aber tatsächlich sollte meiner Meinung nach der praktischere Wert das „empfohlene Zeichen“ sein.

Moderne Webanwendungen werden immer intelligenter. Bei einigen Vorgängen wird der Benutzer standardmäßig auf den Status „Geprüft“ gesetzt „(empfohlen)“ außerdem kann unsere Implementierung jetzt mit dem :default-Selektor prägnanter und einfacher zu warten sein.

Sie können hier klicken: :Standardauswahl und automatisch empfohlene Wörter-Demo hinzufügen

Der Effekt ist wie folgt:

Klicken Sie auf „Andere“. Optionen bleibt das Wort „empfohlen“ fest. Wenn Sie in Zukunft die empfohlenen Optionen ändern möchten, können Sie das aktivierte Attribut der Eingabe direkt ändern, um die Wartung zu vereinfachen.

Die relevanten CSS- und HTML-Codes lauten wie folgt:

input:default + label::after {
    content: '（推荐）';
}
<p><input type="radio" name="pay" id="pay0"> <label for="pay0">支付宝</label></p>
<p><input type="radio" name="pay" id="pay1" checked> <label for="pay1">微信</label></p>
<p><input type="radio" name="pay" id="pay2"> <label for="pay2">银行卡</label></p>

Verwandte Empfehlungen:

CSS Pseudoklassenselektoren

So verwenden Sie Attributselektoren und Pseudoklassenselektoren

CSS3 clevere Verwendung struktureller Pseudoklassenselektoren

Das obige ist der detaillierte Inhalt vonTeilen Sie die Verwendungsmethode des Standard-Pseudoklassenselektors. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!