Perbezaan antara pemilih atribut CSS dan elemen pseudo untuk teg input
P粉988025835
P粉988025835 2023-09-10 15:43:12
0
1
537

**Di dalam fail CSS:**

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

input::placeholder{

color:green;
}

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

Mengapa prosedur penulisan berbeza untuk Jenis, Pemegang tempat dan Tajuk? Walaupun teks di dalam teg kelihatan sama. Bagaimana untuk memahami yang mana atribut dan yang mana elemen?

P粉988025835
P粉988025835

membalas semua(1)
P粉809110129

input::placeholder 选择 的占位符,而 input[attribute="value"] 选择 > Nilai atributnya ialah nilai. Mereka melakukan perkara yang berbeza.

Contoh visualisasi:

/* 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."
>

Nota: Jawapan ini telah ditukar daripada ulasan kerana saya tidak menemui sebarang sasaran pendua.

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan