La différence entre les sélecteurs d'attributs CSS et les pseudo-éléments pour les balises d'entrée

Question

**Dans le fichier CSS :**

input[type="text"]{
border: 2px solid red;
}

input::placeholder{

color:green;
}

input[title="google"]{
background-color:black;
color:white;
}

Pourquoi les procédures d'écriture sont-elles différentes pour Types, Placeholder et Titre ? Même si le texte à l’intérieur de la balise est identique. Comment comprendre quels sont les attributs et quels sont les éléments ?

Answer 1

input::placeholder 选择 的占位符，而 input[attribute="value"] 选择 > Sa valeur d'attribut est la valeur. Ils font des choses différentes.

Exemple de visualisation :

/* Selects an <input> with a 'placeholder' attribute */
input[placeholder] {
  color: #2ab7ca;
}

/* Selects the placeholder itself */
input::placeholder {
  color: #ff6b6b;
}


/* Ignore these */

body {
  margin: 0;
  padding: 2em;
}

input {
  display: block;
  margin: 1em 0;
  height: 2em;
  width: 100%;
  padding: 0.5em;
}

<input
  type="text"
  placeholder="This placeholder is red and not editable."
>

<input
  type="text" placeholder=""
  value="...whereas the input content itself is blue and editable."
>

Remarque : cette réponse a été convertie à partir d'un commentaire car je n'ai trouvé aucune cible en double.