Manipulação de dois pontos em uma ID elemento em um seletor CSS [duplicado]

StackOverflow https://stackoverflow.com/questions/122238

  •  02-07-2019
  •  | 
  •  

Pergunta

Esta questão já tem uma resposta aqui:

JSF é definir o ID de um campo de entrada para search_form:expression. Eu preciso especificar algum estilo em que elemento, mas que cólon parece com o início de uma pseudo-elemento para o navegador por isso fica marcado inválido e ignorada. Existe uma maneira de escapar do cólon ou algo assim? 

input#search_form:expression {
  ///...
}
Foi útil?

Solução

Backslash: 

input#search_form\:expression {  ///...}

Outras dicas

Usando uma barra invertida antes dos dois pontos não trabalho em muitas versões do IE (particularmente 6 e 7; possivelmente outros).

Uma solução alternativa é a utilização do código hexadecimal para o cólon - que é \ 3A

exemplo: 

input#search_form\3A expression {  }

Isso funciona em todos os navegadores: incluindo IE6 + (e possivelmente mais cedo?), Firefox, Chrome, Opera, etc. É parte do CSS2 padrão .

Este artigo irá dizer-lhe como escapar qualquer personagem no CSS.

Agora, há ainda uma ferramenta para isso: http://mothereff.in/css-escapes#0search% 5fform% 3Aexpression

TL; DR Todas as outras respostas para essa pergunta estão incorrectas. Você precisa escapar tanto o sublinhado (para evitar IE6 de ignorar a regra completamente em alguns casos extremos) eo caractere de dois pontos para o seletor para funcionar corretamente em diferentes navegadores.

Tecnicamente, o caráter de cólon pode ser escapado como \:, mas que não funciona no IE <8, assim você terá que usar \3a: 

#search\_form\3a expression {}

Você pode escapar-lo com uma barra invertida 

input#search_form\:expression {
  ///...
}

A partir da CSS Spec

4.1.3 Personagens e caso

As seguintes regras segure sempre:

Todas as folhas de estilo CSS são insensíveis ao caso, com exceção de partes que não estão sob o controle de CSS. Por exemplo, o caso de sensibilidade dos valores do HTML atributos "id" e "classe", de nomes de fontes, e de URIs está fora do âmbito desta especificação. Nota, em particular, que os nomes dos elementos são insensíveis ao caso em HTML, mas maiúsculas e minúsculas em XML. Em CSS, identificadores (incluindo nomes de elementos, classes e IDs em selectores) pode conter apenas os caracteres [-Z0-9 A] e ISO 10646 caracteres U + 00A1 e superior, além do hífen (-) e sublinhado (_) ; eles não podem começar com um dígito, ou um hífen seguido de um dígito. Identificadores também podem conter caracteres de escape e qualquer 10646 caracteres ISO como um código numérico (ver próximo item). Por exemplo, o identificador "B & W?" pode ser escrita como "B \ & W \?" ou "B \ 26 W \ 3F". Note-se que é Unicode código-a-código equivalente a ISO 10646 (ver [Unicode] e [ISO10646]).

Em CSS 2.1, uma barra invertida () indica três tipos de escapes de caracteres. Em primeiro lugar, no interior de uma cadeia de caracteres, uma barra invertida, seguida por uma nova linha é ignorado (isto é, a cadeia é considerado como não contêm qualquer ou a barra invertida a nova linha).

Em segundo lugar, ele cancela o significado de caracteres especiais do CSS. Qualquer personagem (exceto um dígito hexadecimal) podem ser precedidos por uma barra invertida para remover o seu significado especial. Por exemplo, "\"" é uma string consistindo de preprocessors folha um aspas duplas. Estilo não deve remover esses barras invertidas a partir de uma folha de estilo, uma vez que iria mudar o significado da folha de estilo.

Em terceiro lugar, escapes de barra invertida permitir que os autores referem-se a personagens que não pode facilmente colocar em um documento. Neste caso, a barra invertida é seguido por, no máximo, seis dígitos hexadecimais (0..9A..F), que representam o caracter ISO 10646 ([ISO10646]) com esse número, o qual não deve ser zero. (Ele é indefinido em CSS 2.1 o que acontece se uma folha de estilo contém um personagem com Unicode codepoint zero.) Se um personagem no intervalo [0-9a-f] segue o número hexadecimal, o fim das necessidades número a ser feita Claro. Há duas maneiras de fazer isso:

com um espaço (ou outro carácter de espaço em branco): "\ 26 B" ( "& B"). Neste caso, os agentes do utilizador deve tratar um par "CR / LF" (L + 000D / U + 000A) como um único espaço em branco. fornecendo exatamente 6 dígitos hexadecimais: "\ 000026B" ( "& B") Na verdade, estes dois métodos podem ser combinados. Apenas um espaço em branco é ignorado após uma fuga hexadecimal. Note que isto significa que um espaço "real" após a seqüência de escape deve-se quer ser escaparam ou dobrados.

Se o número está fora do intervalo permitido pelo Unicode (por exemplo, "\ 110000" está acima do 10FFFF máximo permitido na corrente Unicode), o UA pode substituir a fuga com o "carácter de substituição" (L + FFFD). Se o personagem está a ser exibido, a UA deve mostrar um símbolo visível, como um glifo "personagem faltando" (cf. 15,2, ponto 5).

Nota: barra invertida escapa, onde permitido, são sempre consideradas como parte de um identificador ou uma cadeia (ou seja, "\ 7B" não é a pontuação, apesar de "{" é, e "\ 32" é permitido no iniciar de um nome de classe, embora "2" não é). O identificador "te \ st" é exatamente o mesmo identificador como "teste".

Eu tive o mesmo problema com dois pontos, e eu era incapaz de mudá-los (não poderia acessar o código outputing dois pontos) e eu queria trazê-los com seletores CSS3 com jQuery.

eu colocá-lo aqui, porque ele pode ser útil para alguém

input[id="something:something"] funcionou bem no seletores jQuery, e pode trabalhar em folhas de estilo, bem como (pode ter problemas com o navegador)

No JSF 2.0, você pode especificar o separador usando o arquivo web.xml como init-param de javax.faces.SEPARATOR_CHAR

Leia esta:

Eu trabalho em um quadro ADF e eu muitas vezes têm de usar JQuery para selecionar elementos. Este formato funciona para mim. Isso funciona no IE8 também. 

$('[id*="gantt1::majorAxis"]').css('border-top', 'solid 1px ' + mediumGray);

I encontrado apenas este formato funcionou para mim para IE7 (Firefox também), e eu uso JSF / Icefaces 1.8.2. 

Say form id=FFF, element id=EEE

var jq=jQuery.noConflict();
jq(document).ready(function() {
jq("[id=FFF:EEE]").someJQueryLibFunction({ jQuery lib function options go here })
});
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top