vDescrição: Estiliza todos os elementos <input> do tipo texto.

input[type="text"] {

  width: 200px;

  padding: 5px;

} 

+----------------------+---------------------------+---------------------------+

| Propriedade           | Descrição                 | Exemplo                   |

+----------------------+---------------------------+---------------------------+

| color                | Cor do texto             | color: #333;              |

| font-family          | Família da fonte          | font-family: Arial, sans-serif; |

| font-size            | Tamanho da fonte          | font-size: 16px;          |

| font-weight          | Peso da fonte (negrito)  | font-weight: bold;        |

| text-align           | Alinhamento do texto      | text-align: center;       |

| background-color     | Cor do plano de fundo     | background-color: #f0f0f0;|

| margin               | Margens externas          | margin: 10px;             |

| padding              | Preenchimento interno     | padding: 5px;             |

| border               | Borda                     | border: 1px solid #ccc;  |

| width                | Largura                   | width: 300px;             |

| height               | Altura                    | height: 200px;            |

| display              | Tipo de exibição          | display: block;          |

| position             | Posicionamento            | position: relative;      |

| top, right, bottom, left | Posicionamento específico | top: 10px; right: 20px;  |

| float                | Flutuação                 | float: left;             |

| clear                | Limpar flutuações         | clear: both;             |

| text-decoration      | Decoração do texto        | text-decoration: underline; |

| line-height          | Altura da linha           | line-height: 1.5;         |

| opacity              | Opacidade                 | opacity: 0.8;            |

| box-shadow           | Sombra da caixa           | box-shadow: 2px 2px 5px #888; |

| transition           | Transição de propriedades | transition: all 0.3s ease-in-out; |

+----------------------+---------------------------+---------------------------+

Os seletores de atributos no CSS permitem que você selecione elementos HTML com base em seus atributos e valores associados. Isso proporciona maior flexibilidade na aplicação de estilos, pois você pode direcionar elementos específicos com base em suas características atributivas. Aqui estão alguns exemplos de seletores de atributos:

• Seletor de Atributo Existente:

  • elemento[atributo]

  • Seleciona elementos que possuem o atributo especificado, independentemente do valor.

  • css

  • Copy code

input[type] {

 border: 1px solid #999;

}

• • 
    

• Seletor de Atributo com Valor Exato:

  • elemento[atributo="valor"]

  • Seleciona elementos com o atributo especificado e um valor exato correspondente.

  • css

  • Copy code

a[href="https://www.example.com"] {

 color: blue;

}

• • 
    

• Seletor de Atributo com Valor que Começa com:

  • elemento[atributo^="valor"]

  • Seleciona elementos com o atributo especificado e um valor que começa com a string fornecida.

  • css

  • Copy code

input[type^="text"] {

 background-color: #f5f5f5;

}

• • 
    

• Seletor de Atributo com Valor que Termina com:

  • elemento[atributo$="valor"]

  • Seleciona elementos com o atributo especificado e um valor que termina com a string fornecida.

  • css

  • Copy code

a[href$=".pdf"] {

 color: red;

}

• • 
    

• Seletor de Atributo com Valor que Contém:

  • elemento[atributo*="valor"]

  • Seleciona elementos com o atributo especificado e um valor que contenha a string fornecida.

  • css

  • Copy code

img[src*="thumbnail"] {

 border: 2px solid #ccc;

}

• • 
    

• Seletor de Atributo com Valor que é um Determinado Token:

  • elemento[atributo~="valor"]

  • Seleciona elementos com o atributo especificado e um valor que é um token dentro de uma lista de tokens.

  • css

  • Copy code

li[data-tags~="red"] {

 color: red;

}

Esses seletores de atributos fornecem maneiras poderosas de segmentar elementos com base em suas características específicas, e eles podem ser combinados com outros seletores para criar regras de estilo mais precisas e flexíveis.