dem Element li oder dem Element a eine Klasse hinzufügen?

Question

Ich habe eine Standardliste von Links:

<li><a href="">one</a></li>
<li><a href="">two</a></li>

Wenn ich eine zusätzliche Klasse zu einem der Listenelemente hinzufügen möchte, sollte ich die Klasse zu der li o el a Element? Was ist die beste Praxis?

Vielen Dank!

Cameron

Answer 1

Wenn Sie das Listenelement gestalten, z. B. bei der Erstellung eines Menüs, fügen Sie die Klasse zum Listenelement hinzu. Wenn Sie das Aussehen des Links ändern möchten, fügen Sie sie dem Anker-Tag hinzu.

Es gibt nicht die eine richtige Antwort. Sie sollten den Stil wählen, der semantisch am sinnvollsten ist. In vielen Fällen müssen Sie möglicherweise sowohl das Listenelement y der Anker, in diesem Fall sollten Sie die Klasse zum li-Tag hinzufügen und Ihre Stile für beide definieren.

li.myclass {
    /* li styles */
}

li.myclass a {
    /* link styles */
}

Das ist ziemlich genau das, was alex vorgeschlagen. Der zweite Stil zielt nur auf die Links ab, die in Listenelemente Ihrer Klasse eingeschlossen sind.

Answer 2

Ich würde es im Allgemeinen zum Listenelement hinzufügen das gibt Ihnen die Flexibilität, mit CSS auf das Listenelement oder den darin enthaltenen Anker-Tag abzuzielen

li.class-name {
    /* target li class */

}

li.class-name a {
    /*target it's anchor */
}

In der Produktion ist es jedoch besser, das anfängliche li aus dem Klassennamen wegzulassen, wenn man auf ihn verweist. Es ist unnötig (es sei denn, Sie haben ein wirklich schlechtes Gedächtnis).

Answer 3

Was wollen Sie gestalten, das Listenelement oder den Anker? Wahrscheinlich wollen Sie den Anker gestalten, also fügen Sie ihn hinzu

Answer 4

Wenn Sie nur einem der Links in Ihrer Liste einen Stil zuweisen möchten, verwenden Sie eine id anstelle einer Klasse. Zum Beispiel so.

<li id="new_style"><a href="">one</a></li>

Und gestalten Sie es so:

#new_style { margin: 1em; font-weight: 600; }