pseudoelementi - selettore di prossimità html




Quali sono i valori validi per l'attributo id in HTML? (15)

HTML5

Tenendo presente che l'ID deve essere unico, es. non ci devono essere più elementi in un documento che hanno lo stesso valore id.

Le regole sul contenuto ID in HTML5 sono (a parte l'unicità):

This attribute's value must not contain white spaces. [...] 
Though this restriction has been lifted in HTML 5, 
an ID should start with a letter for compatibility.

Questa è la specifica W3 su ID (da MDN):

Any string, with the following restrictions:
must be at least one character long
must not contain any space characters
Previous versions of HTML placed greater restrictions on the content of ID values 
(for example, they did not permit ID values to begin with a number).

Ulteriori informazioni:

  • W3 - attributi globali ( id )
  • MDN attributo ( id )

Quando si creano gli attributi id per gli elementi HTML, quali regole ci sono per il valore?


HTML5:

elimina le ulteriori restrizioni sull'attributo id vedi qui . Gli unici requisiti rimasti (oltre ad essere unici nel documento) sono:

  1. il valore deve contenere almeno un carattere (non può essere vuoto)
  2. non può contenere caratteri spaziali.

PRE-HTML5:

L'ID deve corrispondere:

[A-Za-z][-A-Za-z0-9_:.]*
  1. Deve iniziare con caratteri AZ o az
  2. Può contenere - (trattino), _ (trattino basso),: (due punti) e . (periodo)

ma si dovrebbe evitare : e . beacause:

Ad esempio, un ID potrebbe essere etichettato come "ab: c" e fatto riferimento nel foglio di stile come #ab: c ma oltre ad essere l'id per l'elemento, potrebbe significare id "a", classe "b", pseudo- selettore "c". Meglio evitare la confusione e stare lontano dall'uso. e: complessivamente.


  1. Gli ID sono più adatti per nominare parti del tuo layout, quindi non dovrebbero dare lo stesso nome per ID e classe
  2. L'ID consente di caratteri alfanumerici e speciali
  3. ma evita di usare # : . * ! # : . * ! simboli
  4. spazi non consentiti
  5. non iniziato con numeri o un trattino seguito da una cifra
  6. che tiene conto del maiuscolo o minuscolo
  7. l'utilizzo dei selettori ID è più rapido rispetto all'utilizzo dei selettori di classe
  8. usa il trattino "-" (il carattere di sottolineatura "_" può anche usare ma non va bene per seo) per la lunga classe CSS o nomi di regole di identificazione
  9. Se una regola ha un selettore ID come selettore di chiave, non aggiungere il nome del tag alla regola. Poiché gli ID sono unici, l'aggiunta di un nome di tag rallenterebbe inutilmente il processo di abbinamento.
  10. In HTML5, l'attributo id può essere utilizzato su qualsiasi elemento HTML e In HTML 4.01, l'attributo id non può essere utilizzato con: <base>, <head>, <html>, <meta>, <param>, <script>, <style>, and <title>.

Dalla specifica HTML 4 :

I token ID e NAME devono iniziare con una lettera ([A-Za-z]) e possono essere seguiti da qualsiasi numero di lettere, cifre ([0-9]), trattini ("-"), trattini bassi ("_") , due punti (":") e punti (".").

Un errore comune è usare un ID che inizia con una cifra.


I trattini, i caratteri di sottolineatura, i punti, i due punti, i numeri e le lettere sono tutti validi per l'uso con CSS e JQuery. Il seguente dovrebbe funzionare ma deve essere unico in tutta la pagina e deve anche iniziare con una lettera [A-Za-z].

Lavorare con i due punti e i periodi richiede un po 'più di lavoro ma puoi farlo come mostra il seguente esempio.

<html>
<head>
<title>Cake</title>
<style type="text/css">
    #i\.Really\.Like\.Cake {
        color: green;
    }
    #i\:Really\:Like\:Cake {
        color: blue;
    }
</style>
</head>
<body>
    <div id="i.Really.Like.Cake">Cake</div>
    <div id="testResultPeriod"></div>

    <div id="i:Really:Like:Cake">Cake</div>
    <div id="testResultColon"></div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
            var testPeriod = $("#i\\.Really\\.Like\\.Cake");
            $("#testResultPeriod").html("found " + testPeriod.length + " result.");

            var testColon = $("#i\\:Really\\:Like\\:Cake");
            $("#testResultColon").html("found " + testColon.length + " result.");
        });
    </script>
</body>
</html>

In HTML5, un ID non può iniziare con un numero, ad esempio id- "1kid" e non possono avere spazi (id = "Some kind" )


Inoltre, non dimenticare mai che un ID è unico. Una volta utilizzato, il valore ID potrebbe non apparire più in qualsiasi punto del documento.

Potresti avere molti ID, ma tutti devono avere un valore unico.

D'altra parte, c'è l'elemento di classe. Proprio come l'ID, può apparire molte volte, ma il valore può essere usato più e più volte.


Nessuno spazio, deve iniziare con almeno un carattere dalla a alla z e da 0 a 9.


Per fare riferimento a un ID con un punto in esso è necessario utilizzare una barra rovesciata. Non sono sicuro se è lo stesso per trattini o underscore. Ad esempio: HTML

<div id="maintenance.instrumentNumber">############0218</div>

CSS

#maintenance\.instrumentNumber{word-wrap:break-word;}

Puoi tecnicamente utilizzare due punti e punti negli attributi id / name, ma ti suggerisco caldamente di evitare entrambi.

Nei CSS (e in molte librerie JavaScript come jQuery), sia il punto che il colon hanno un significato speciale e ti imbatterai in problemi se non stai attento. I periodi sono selettori di classe e i due punti sono pseudo-selettori (ad esempio ": hover" per un elemento quando il mouse è sopra di esso).

Se assegni a un elemento l'ID "my.cool:thing", il tuo selettore CSS sarà simile al seguente:

#my.cool:thing { ... /* some rules */ ... }

Il che in realtà dice "l'elemento con un id di" mio ", una classe di" fico "e lo" pseudo-selettore "cosa" in linguaggio CSS.

Rimani in AZ di qualsiasi caso, numeri, trattini bassi e trattini. E come detto sopra, assicurati che i tuoi ID siano unici.

Questa dovrebbe essere la tua prima preoccupazione.


Sembra che sebbene i due punti (:) e punti (.) Siano validi nelle specifiche HTML, non sono validi come selettori di id in CSS quindi è probabilmente meglio evitare se si intende utilizzarli a tale scopo.


So che è molto tardi per rispondere a questa domanda, ma poiché ho avuto lo stesso problema e trovo questa risposta più completa, decido di rispondere.

Tutti a a, b, c ... x, y, z, A, B, C ... X, Y, Z, 0,1,2 ... 7,8,9, -, _ possono essere utilizzati per id, ma non dovresti usare cifre e - come primo carattere.

questi sono sbagliati:

1adfsvsdf   // use number in first
-adfasdf    // use - in first
afd'ksdf    // use ' in characters
asdf;asdf   // use ; in characters

Un identificativo univoco per l'elemento.

Non ci devono essere più elementi in un documento che hanno lo stesso valore id.

Qualsiasi stringa, con le seguenti restrizioni:

  1. deve essere lungo almeno un carattere
  2. non deve contenere caratteri spaziali:

    • U + 0020 SPAZIO
    • U + 0009 TABULAZIONE CARATTERI (scheda)
    • U + 000A LINE FEED (LF)
    • U + 000C FORM FEED (FF)
    • U + 000D CARRIAGE RETURN (CR)

Utilizzo di caratteri ad eccezione di ASCII letters and digits, '_', '-' and '.' potrebbe causare problemi di compatibilità, in quanto non erano consentiti in HTML 4 . Sebbene questa restrizione sia stata revocata in HTML 5 , un ID dovrebbe iniziare con una lettera per la compatibilità.


alfabeti-> cappucci e piccoli
cifre-> 0-9
caratteri speciali-> ':', '-', '_', '.'

il formato dovrebbe essere a partire da '.' o un alfabeto, seguito da uno dei caratteri speciali di più alfabeti o numeri. il valore del campo id non deve terminare con un '_'.
Inoltre, non sono consentiti spazi, se forniti, vengono trattati come valori diversi, che non è valido nel caso degli attributi id.


per HTML5

Il valore deve essere unico tra tutti gli ID nella sottostruttura home dell'elemento e deve contenere almeno un carattere. Il valore non deve contenere spazi vuoti.

Almeno un personaggio, nessuno spazio.

Ciò apre la porta a casi d'uso validi come l'utilizzo di caratteri accentati. Inoltre, ci dà un sacco di più munizioni per spararci al piede con, dal momento che ora puoi usare valori di id che causeranno problemi sia con i CSS che con JavaScript, a meno che tu non sia molto attento.





html