Saya punya pertanyaan jika seseorang dapat membantu saya dengan ini.

Haruskah Bungkus ada di semua kelas ini, atau haruskah Nav ada di semuanya?

atau Haruskah keduanya digunakan?

Mana yang akan Anda katakan untuk digunakan, dan mengapa?

Klik pada Gambar untuk melihat Tautan

Jalan Pertama

https://jsfiddle.net/jq18evLs/137/

<div class="wrap">
  <div class="covere" title="OPEN"></div>
  <div class="nav">

.wrap {
  position: relative;
  width: 266px;
  height: 174px;
  margin-top: 8px;
  overflow: hidden;
}

.wrap a {
  float: left;
  width: 50px;
  height: 50px;
  margin: 0 4px 12px 0;
  color: transparent;
  background: rgba(0, 0, 0, .2);
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

.wrap a:hover {
  border: 3px solid red;
}

.wrap a:nth-of-type(5n) {
  margin-right: 0;
}

.wrap a:nth-of-type(8) {
  opacity: 0;
  border: none;
  background: none;
}

.wrap a:nth-of-type(15) {
  position: relative;
  height: 50px;
  width: 50px;
  background: none;
  border: 3px solid #0059dd;
  box-sizing: border-box;

.nav {
  margin: 0;
  padding: 0;
}

.nav a {
  float: left;
}

}

Klik pada Gambar untuk melihat Tautan

Jalan ke-2

https://jsfiddle.net/jq18evLs/139/

<div class="wrap">
  <div class="covere" title="OPEN"></div>
  <div class="nav">

.wrap {
  position: relative;
  width: 266px;
  height: 174px;
  margin-top: 8px;
  overflow: hidden;
}

.nav a {
  float: left;
  width: 50px;
  height: 50px;
  margin: 0 4px 12px 0;
  color: transparent;
  background: rgba(0, 0, 0, .2);
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

.nav a:hover {
  border: 3px solid red;
}

.nav a:nth-of-type(5n) {
  margin-right: 0;
}

.nav a:nth-of-type(8) {
  opacity: 0;
  border: none;
  background: none;
}

.nav a:nth-of-type(15) {
  position: relative;
  height: 50px;
  width: 50px;
  background: none;
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

.nav {
  margin: 0;
  padding: 0;
}

.nav a {
  float: left;
}

Klik pada Gambar untuk melihat Tautan

Cara ke-3

https://jsfiddle.net/jq18evLs/143/

<div class="wrap">
  <div class="covere" title="OPEN"></div>
  <div>

------------------------------------

  .wrap {
  position: relative;
  width: 266px;
  height: 174px;
  margin-top: 8px;
  overflow: hidden;
}

  .wrap a {
  float: left;
  width: 50px;
  height: 50px;
  margin: 0 4px 12px 0;
  color: transparent;
  background: rgba(0, 0, 0, .2);
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

.wrap a:hover {
  border: 3px solid red;
}

.wrap a:nth-of-type(5n) {
  margin-right: 0;
}

.wrap a:nth-of-type(8) {
  opacity: 0;
  border: none;
  background: none;
}

.wrap a:nth-of-type(15) {
  position: relative;
  height: 50px;
  width: 50px;
  background: none;
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

.wrap {
  margin: 0;
  padding: 0;
}

.wrap a {
  float: left;
}
2
user9162072 6 Januari 2018, 06:57

1 menjawab

Jawaban Terbaik

Tergantung. Berdasarkan HTML dalam pertanyaan Anda, saya akan memilih opsi 2. Mengapa? Karena itu berfungsi dan penyeleksi tidak melewati kualifikasi. Misalnya, halaman HTML berisi dua jenis tautan jangkar - pertama tautan itu ke dalam situs web (domain yang sama) dan lainnya yang mengarah ke situs web eksternal. Dan HTML Anda terlihat seperti berikut:

<div class="wrap">
  <div class="internal-links">
    <a href="/1.html"></a>
    <a href="/2.html"></a>
    <a href="/3.html"></a>
  </div>

  <div class="external-links">
    <a href="https://google.com/1.html"></a>
    <a href="https://google.com/2.html"></a>
    <a href="https://google.com/3.html"></a>
  </div>
</div>

Saya akan menata tag anchor di HTML di atas seperti berikut:

.internal-links a {
  color: blue;
}

.external-links a {
  color: red;
}

Tetapi jika semua tautan harus ditata dengan cara yang sama maka saya hanya akan melakukan:

a {
    color: blue;
}

Saya pikir membuat keputusan tentang kelas bersarang atau penyeleksi tergantung pada 2 hal:

1. Kekhususan - Kekhususan adalah cara browser memutuskan aturan CSS mana yang akan diterapkan ke elemen tertentu. Baca lebih lanjut tentang spesifisitas di sini

2. Manajemen CSS - Proyek yang lebih besar mungkin memerlukan beberapa jenis strategi agar CSS dapat dikelola. Atau terkadang pemilih bersarang mungkin masuk akal. Ambil kode berikut sebagai contoh:

button.large {
  width: 200px;
  height: 50px;
}

img.large {
  width: 400px;
  height: auto;
}

Sekarang di sini menggunakan penyeleksi img atau button benar-benar masuk akal. Contoh ini menggunakan pemilih tambahan untuk memperhitungkan varian. Demikian pula, solusi yang sama dapat diterapkan untuk mengelola status a.is-active.

0
Lucky Soni 6 Januari 2018, 19:32