[CSS/DIV] Analise o uso dos quatro principais seletores de valor de atributos CSS

Este artigo vai descrever isso para vocêSeletor de valor de propriedades CSSO formato do seletor de atributos é elemento seguido de parênteses, com atributos entre parênteses, ou expressões de atributos (não sei se a descrição está correta, palavras criadas por eles mesmos), como h1[título], h1[título="logo"], etc., acredito que você aprenderá muito neste artigo.

Tutorial de CSS: Seletor de Valor de Atributos CSS

CSS AttributeSelectors, talvez você não deva ser desconhecido com selectores de atributos, em essência, id e class selectors são na verdade selectores de valor de atributo, basta selecionar o id ou valor da classe.

O formato do seletor de atributos é elemento seguido de parênteses, com atributos entre parênteses, ou expressões de atributos (não sei se a descrição está correta, palavras criadas por mim mesmo), como h1[title], h1[title="Logo"], etc., você pode ver 4 formas específicas da minha discussão abaixo.

1. Seletor simples de valor de atributos CSS

Independentemente do nome, essa é a característica do seletor de atributos simples.

H1[classe]{cor:prata; Atuará sobre qualquer elemento h1 com classe, independentemente do valor da classe. Portanto<h1class="hoopla">Olá</h1>, <h1class="severe">Serenity</h1>, <h1class="fancy"> h1 de Fooling</h1> será afetado por esta regra.

Claro, essa "propriedade" não é apenas uma classe ou id, mas pode ser todas as propriedades legítimas do elemento, como o alt de img, como img[alt]{cssdeclarationshere; Vai se aplicar a qualquer elemento de IMG com atributo alternativo. Então a[href][título]{font-weight:bold; E }? Como você sabe, isso funciona em elementos com atributos href e title, como <atitle="W3CHome">W3C</a>.

2. Seletor preciso de valores de atributos CSS

id e class são essencialmente seletores exatos de valor de atributo, sim, h1#logo é igual a h1[id="logo"]. Como mencionado antes, não nos limitamos ao id ou à classe, podemos usar qualquer propriedade! Por exemplo, a[][title="W3CHome"]{font-size:200%; } será aplicado a <atitle="W3CHome">W3C</a>.

3. Alguns seletores de valor de atributos CSS

Como o nome sugere, desde que o valor do atributo coincida parcialmente (neste caso, a parte que realmente corresponde à palavra inteira) atuará sobre o elemento. Vamos ver um exemplo:

Qualquer um desses pode deixar a fonte do p em negrito.

Esse seletor é muito útil, por exemplo, se você quiser estilizar uma ilustração com a string "Figure" no título, por exemplo, title="Figure5:xxx description", você pode usar img[title~="Figure"].

Deve-se notar que, como enfatizei na primeira frase, você precisa corresponder à palavra inteira, e img[title~="Figure"] não vai corresponder à descrição title="Figure5:xxx".

Além disso, fiz um pequeno teste, você muda "Figure" para "Illustration" no exemplo, e muda img[title~="Figure"] para img[title~="Illustration"], e ainda assim corresponde no Firefox, independentemente de a codificação ser GB2312 ou UTF-8. Parece que o suporte a CSS para chinês não é ruim.

4. Seletor especial de valor de atributos CSS

Meio estranho, esse seletor. Funciona assim, bem, é mais fácil dar um exemplo do que descrever.

*[lang|="en"]{cor:branco; Essa regra selecionará o valor do atributo lang ou do elemento que começa com en-. Ou seja, pode corresponder a <h1lang="en">Olá!</h1>, <plang="en-us">Saudações!</p>e <divlang="en-au">Olá!</div>e não corresponde<plang="fr">Bonjour!</p>e <h3lang="cy-en">Jrooana!</h3>.