Nonaktifkan perubahan warna tag jangkar saat dikunjungi

Question 1

Saya harus menonaktifkan perubahan warna tag jangkar saat dikunjungi. Saya melakukan ini:

a:visited{ color: gray }

(Tautan berwarna abu-abu sebelum dikunjungi.) Tetapi ini adalah cara di mana saya secara eksplisit menyatakan warna setelah tautan dikunjungi, yang sekali lagi merupakan perubahan warna.

Bagaimana saya bisa menonaktifkan perubahan warna dari sebuah tag anchor ketika dikunjungi tanpa melakukan perubahan warna yang eksplisit?

Question 2

Tidak boleh. Anda hanya dapat mengatur gaya negara yang dikunjungi.

Untuk orang lain yang menemukan ini, pastikan Anda memilikinya dalam urutan yang benar:

a {color:#FF0000;}         /* Unvisited link  */
a:visited {color:#00FF00;} /* Visited link    */
a:hover {color:#FF00FF;}   /* Mouse over link */
a:active {color:#0000FF;}  /* Selected link   */

Question 3

Jika Anda hanya ingin warna jangkar tetap sama dengan elemen induk jangkar, Anda dapat memanfaatkan warisan:

a, a:visited, a:hover, a:active {
  color: inherit;
}

Perhatikan bahwa tidak perlu mengulangi aturan untuk setiap pemilih; cukup gunakan daftar pemilih yang dipisahkan koma (urutan penting untuk elemen semu jangkar). Selain itu, Anda dapat menerapkan pemilih semu ke kelas jika Anda ingin menonaktifkan warna jangkar khusus secara selektif:

.special-link, .special-link:visited, .special-link:hover, .special-link:active {
  color: inherit;
}

Pertanyaan Anda hanya menanyakan tentang negara bagian yang dikunjungi, tetapi saya berasumsi yang Anda maksud adalah semua negara bagian. Anda dapat menghapus pemilih lain jika Anda ingin mengizinkan perubahan warna pada semua kecuali yang dikunjungi.

Question 4

Untuk :hovermenimpa :visited, dan memastikan :visitedsama dengan warna awal, :hoverharus muncul setelahnya :visited.

Jadi jika ingin menonaktifkan perubahan warna, a:visitedharus datang sebelumnya a:hover. Seperti ini:

a { color: gray; }
a:visited { color: orange; }
a:hover { color: red; }

Untuk menonaktifkan :visitedperubahan, Anda akan memberinya gaya dengan kelas non-pseudo:

a, a:visited { color: gray; }
a:hover { color: red; }

Question 5

Hapus selektor atau setel ke warna yang sama seperti teks Anda muncul secara normal.

Question 6

Jika Anda menggunakan beberapa pra-prosesor seperti SASS, Anda dapat menggunakan @extendfitur:

a:visited {
  @extend a;
}

Akibatnya, Anda akan melihat a:visitedselektor yang ditambahkan secara otomatis untuk setiap gaya dengan aselektor, jadi berhati-hatilah dengannya, karena tabel gaya Anda mungkin bertambah besar ukurannya.

Sebagai kompromi, Anda dapat menambahkan @extend hanya di blok yang benar-benar Anda butuhkan.

Question 7

Anda dapat mengatasi masalah ini dengan menelepon a:linkdan a:visitedmenyeleksi bersama. Dan ikuti dengan a:hoverselektor.

a:link, a:visited
{color: gray;}
a:hover
{color: skyblue;}

Question 8

Saya pikir jika saya menetapkan warna untuk a:visiteditu tidak baik: Anda harus tahu warna default dari tag adan setiap kali menyinkronkannya a:visited.

Saya tidak ingin tahu tentang warna default (dapat disetel dalam common.cssaplikasi Anda, atau Anda dapat menggunakan gaya luar).

Saya pikir itu solusi yang bagus:

HTML:

<body>
    <a class="absolute">Test of URL</a>
    <a class="unvisited absolute" target="_blank" href="google.ru">Test of URL</a>
</body>

CSS:

.absolute{
    position: absolute;
}
a.unvisited, a.unvisited:visited, a.unvisited:active{
    text-decoration: none;
    color: transparent;
}

Question 9

a {
    color: orange !important;
}

!importantmemiliki efek bahwa properti yang dipermasalahkan tidak dapat diganti kecuali yang lain !importantdigunakan. Ini umumnya dianggap praktik yang buruk untuk digunakan !importantkecuali benar-benar diperlukan; namun, saya tidak dapat memikirkan cara lain untuk 'menonaktifkan' :visitedhanya menggunakan CSS.

Question 10

Menggunakan:

a:visited {
    text-decoration: none;
}

Tapi itu hanya akan mempengaruhi link yang belum diklik.

Answer 1

Saya harus menonaktifkan perubahan warna tag jangkar saat dikunjungi. Saya melakukan ini:

a:visited{ color: gray }

(Tautan berwarna abu-abu sebelum dikunjungi.) Tetapi ini adalah cara di mana saya secara eksplisit menyatakan warna setelah tautan dikunjungi, yang sekali lagi merupakan perubahan warna.

Bagaimana saya bisa menonaktifkan perubahan warna dari sebuah tag anchor ketika dikunjungi tanpa melakukan perubahan warna yang eksplisit?

Answer 2

105

Tidak boleh. Anda hanya dapat mengatur gaya negara yang dikunjungi.

Untuk orang lain yang menemukan ini, pastikan Anda memilikinya dalam urutan yang benar:

a {color:#FF0000;}         /* Unvisited link  */
a:visited {color:#00FF00;} /* Visited link    */
a:hover {color:#FF00FF;}   /* Mouse over link */
a:active {color:#0000FF;}  /* Selected link   */

Bradshaw kaya
sumber

4

Untuk benar-benar anal tentang hal itu, tidak seharusnya amenjadi a:link?

nikc.org

1

Saya rasa begitu, meskipun saya jarang melakukan itu.

Rich Bradshaw

2

@ nikc.org tidak anal sama sekali, a:linkdan ayang tidak sama. Jangkar tidak harus berupa tautan. Biasanya berubah warna hanya jika mengandung tautan.

rustyx

Answer 3

4

Untuk benar-benar anal tentang hal itu, tidak seharusnya amenjadi a:link?

nikc.org

Answer 4

1

Saya rasa begitu, meskipun saya jarang melakukan itu.

Rich Bradshaw

Answer 5

2

@ nikc.org tidak anal sama sekali, a:linkdan ayang tidak sama. Jangkar tidak harus berupa tautan. Biasanya berubah warna hanya jika mengandung tautan.

rustyx

Answer 6

204

Jika Anda hanya ingin warna jangkar tetap sama dengan elemen induk jangkar, Anda dapat memanfaatkan warisan:

a, a:visited, a:hover, a:active {
  color: inherit;
}

Perhatikan bahwa tidak perlu mengulangi aturan untuk setiap pemilih; cukup gunakan daftar pemilih yang dipisahkan koma (urutan penting untuk elemen semu jangkar). Selain itu, Anda dapat menerapkan pemilih semu ke kelas jika Anda ingin menonaktifkan warna jangkar khusus secara selektif:

.special-link, .special-link:visited, .special-link:hover, .special-link:active {
  color: inherit;
}

Pertanyaan Anda hanya menanyakan tentang negara bagian yang dikunjungi, tetapi saya berasumsi yang Anda maksud adalah semua negara bagian. Anda dapat menghapus pemilih lain jika Anda ingin mengizinkan perubahan warna pada semua kecuali yang dikunjungi.

Ryan
sumber

Ini bekerja dengan baik, terima kasih! Sebagai catatan bagi orang lain, Anda mungkin harus menambahkan! Important ke tag warna agar dapat digunakan dengan benar bergantung pada apa lagi yang ada di situs web Anda: color: inherit! Important;

Mmm

3

Di Chrome, ini hanya membuat teks tautan menjadi hitam.

RajV

4

Apakah ada cara untuk memiliki a:linkmenjadi link warna default (biasanya biru) dan memiliki a:visitedmewarisi dari itu, tanpa hard-coding "biru" di mana saja?

rustyx

Answer 7

Ini bekerja dengan baik, terima kasih! Sebagai catatan bagi orang lain, Anda mungkin harus menambahkan! Important ke tag warna agar dapat digunakan dengan benar bergantung pada apa lagi yang ada di situs web Anda: color: inherit! Important;

Mmm

Answer 8

3

Di Chrome, ini hanya membuat teks tautan menjadi hitam.

RajV

Answer 9

4

Apakah ada cara untuk memiliki a:linkmenjadi link warna default (biasanya biru) dan memiliki a:visitedmewarisi dari itu, tanpa hard-coding "biru" di mana saja?

rustyx

Answer 10

Untuk :hovermenimpa :visited, dan memastikan :visitedsama dengan warna awal, :hoverharus muncul setelahnya :visited.

Jadi jika ingin menonaktifkan perubahan warna, a:visitedharus datang sebelumnya a:hover. Seperti ini:

a { color: gray; }
a:visited { color: orange; }
a:hover { color: red; }

Untuk menonaktifkan :visitedperubahan, Anda akan memberinya gaya dengan kelas non-pseudo:

a, a:visited { color: gray; }
a:hover { color: red; }

Answer 11

2

Apakah saya melihat ini salah atau apakah Anda melakukan kebalikan dari apa yang dikatakan dalam kutipan? Menurut W3Schools itu 1) a:link, a:visited2) a:hover3)a:active

Max Truxa

Answer 12

0

Hapus selektor atau setel ke warna yang sama seperti teks Anda muncul secara normal.

Kyle
sumber

Answer 13

Jika Anda menggunakan beberapa pra-prosesor seperti SASS, Anda dapat menggunakan @extendfitur:

a:visited {
  @extend a;
}

Akibatnya, Anda akan melihat a:visitedselektor yang ditambahkan secara otomatis untuk setiap gaya dengan aselektor, jadi berhati-hatilah dengannya, karena tabel gaya Anda mungkin bertambah besar ukurannya.

Sebagai kompromi, Anda dapat menambahkan @extend hanya di blok yang benar-benar Anda butuhkan.

Answer 14

Anda dapat mengatasi masalah ini dengan menelepon a:linkdan a:visitedmenyeleksi bersama. Dan ikuti dengan a:hoverselektor.

a:link, a:visited
{color: gray;}
a:hover
{color: skyblue;}

Answer 15

Saya pikir jika saya menetapkan warna untuk a:visiteditu tidak baik: Anda harus tahu warna default dari tag adan setiap kali menyinkronkannya a:visited.

Saya tidak ingin tahu tentang warna default (dapat disetel dalam common.cssaplikasi Anda, atau Anda dapat menggunakan gaya luar).

Saya pikir itu solusi yang bagus:

HTML:

<body>
    <a class="absolute">Test of URL</a>
    <a class="unvisited absolute" target="_blank" href="google.ru">Test of URL</a>
</body>

CSS:

.absolute{
    position: absolute;
}
a.unvisited, a.unvisited:visited, a.unvisited:active{
    text-decoration: none;
    color: transparent;
}

Answer 16

Siapa yang membuat saya minus, dapatkah Anda menulis mengapa Anda melakukannya? Tentu saja Anda bisa menggunakan warna tag A. Tetapi saya menulis jika Anda menggunakan warna

browser

Answer 17

a {
    color: orange !important;
}

!importantmemiliki efek bahwa properti yang dipermasalahkan tidak dapat diganti kecuali yang lain !importantdigunakan. Ini umumnya dianggap praktik yang buruk untuk digunakan !importantkecuali benar-benar diperlukan; namun, saya tidak dapat memikirkan cara lain untuk 'menonaktifkan' :visitedhanya menggunakan CSS.

Answer 18

-8

Menggunakan:

a:visited {
    text-decoration: none;
}

Tapi itu hanya akan mempengaruhi link yang belum diklik.

Moliere
sumber

3

Pertanyaannya tentang warna, bukan dekorasi teks.

Bryan Green

Answer 19

3

Pertanyaannya tentang warna, bukan dekorasi teks.

Bryan Green

Nonaktifkan perubahan warna tag jangkar saat dikunjungi

Jawaban: