CSS "dan" dan "atau"

113

Saya mendapat masalah yang cukup besar, karena saya perlu mengkritik dari menata beberapa jenis input. Saya punya sesuatu seperti:

.registration_form_right input:not([type="radio")
{
 //Nah.
}

Tetapi saya juga tidak ingin memberi gaya pada kotak centang.

Saya sudah mencoba:

.registration_form_right input:not([type="radio" && type="checkbox"])
.registration_form_right input:not([type="radio" && "checkbox"])
.registration_form_right input:not([type="radio") && .registration_form_right input:not(type="checkbox"])

Bagaimana cara menggunakannya &&? Dan saya harus ||segera menggunakannya , dan menurut saya penggunaannya akan sama.

Pembaruan:
Saya masih belum tahu cara menggunakan ||dan &&benar. Saya tidak dapat menemukan apa pun di dokumen W3.

css css-selectors conditional-operator Misiur
sumber
17
"anathematise" Astaga. Anda ingin mengancam orang yang mencoba mencentang kotak dengan retribusi yang tulus? (Anda mungkin bermaksud "mengecualikan" atau serupa, misalnya, "Saya perlu mengecualikan beberapa jenis masukan dari aturan gaya.")
TJ Crowder
3
Yah, saya tidak dapat menemukan terjemahan yang baik ke kata kerja frase dari bahasa saya;)
Misiur
4
Saya pikir @TJ Crowder mungkin mengerti itu. Tapi itu lucu ... terutama ironi kesalahan ejaan nya 'ilahi' = D
David mengatakan mengembalikan Monica
Ngram yang bagus . ; ^)
ruffin

Jawaban:

141

&& bekerja dengan merangkai beberapa penyeleksi seperti itu:

<div class="class1 class2"></div>

div.class1.class2
{
  /* foo */
}

Contoh lain:

<input type="radio" class="class1" />

input[type="radio"].class1
{
  /* foo */
}

|| bekerja dengan memisahkan beberapa pemilih dengan koma seperti ini:

<div class="class1"></div>
<div class="class2"></div>

div.class1,
div.class2
{
  /* foo */
}
geofflee
sumber
1
Oke, terima kasih untuk cahayanya. Saya benci formulir gaya, tapi itu tugas saya, dan situs bukan milik saya. Saya akan menerapkan kelas ke input.
Misiur
5
Berikut bagan berguna tentang apa yang didukung Internet Explorer: msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx#selectors
geofflee
12
Siapa yang menggunakan IE sekarang :)
Tarun
2
nottampaknya berfungsi dari IE9 dan seterusnya (berkat grafik yang disediakan oleh @geofflee).
SharpC
1
Apakah kami masih khawatir untuk mendukung versi IE yang lebih lama pada tahun 2018? Bahkan Microsoft pun tidak.
Anomali
48

DAN ( &&):

.registration_form_right input:not([type="radio"]):not([type="checkbox"])

ATAU ( ||):

.registration_form_right input:not([type="radio"]), 
   .registration_form_right input:not([type="checkbox"])
kennytm
sumber
Nah, gagal juga. Ini akan berlaku 1
banding
@KenTM:. Menggunakan koma akan melakukan sesuatu seperti ini: .registration_form_right input: not ([type = "radio"]) akan diterapkan ke semua hal termasuk checkbox, dan .registration_form_right input: not ([type = "checkbox"]) akan berlaku untuk semuanya, termasuk radio
Misiur
@Misiur: Tentu saja. Yang kedua adalah untuk kasus "ATAU" (alias ||). Diperbarui untuk memperjelas.
kennytm
1
@KennyTM: Apa yang Misiur coba katakan adalah… "||" Anda contoh secara sintaksis benar, tetapi jika Anda menyederhanakan ekspresi, itu menjadi hanya ".registration_form_right input" karena gabungan dari dua penyeleksi menyertakan semua input.
geofflee
@geo, @Mis: lihat, pertanyaan yang diajukan "Saya akan perlu menggunakan || segera", jadi ini adalah cara untuk membangun ||dari contoh. Tentu menjadi .registration_form_right inputsetelah penyederhanaan, tetapi intinya adalah Anda menggunakan ,as|| . Anda bisa menggunakan input:not([type="radio"]), input:not([name="foo"])untuk contoh nontrivial.
kennytm
16

Untuk memilih properti aDAN bdari sebuah Xelemen:

X[a][b]

Untuk memilih sifat aOR bdari Xunsur:

X[a],X[b]
waao
sumber
4

Kelas :notsemu tidak didukung oleh IE. Saya akan mendapatkan sesuatu seperti ini sebagai gantinya:

.registration_form_right input[type="text"],
.registration_form_right input[type="password"],
.registration_form_right input[type="submit"],
.registration_form_right input[type="button"] {
  ...
}

Beberapa duplikasi di sana, tetapi itu harga kecil yang harus dibayar untuk kompatibilitas yang lebih tinggi.

Max Shawabkeh
sumber
2

Anda dapat mereproduksi perilaku "ATAU" menggunakan & dan: tidak.

SomeElement.SomeClass [data-statement="things are getting more complex"]  :not(:not(A):not(B))     {
    /* things aren't so complex for A or B */
}
Serge Profafilecebook
sumber
2
Maaf,: bukan (: not) bukan sintaks CSS yang valid. Ia bekerja dengan jQuery.
Serge Profafilecebook
1

Saya rasa Anda tidak suka menulis lebih banyak pemilih dan membaginya dengan koma?

.registration_form_right input:not([type="radio"]),  
.registration_form_right input:not([type="checkbox"])  
{  
}

dan BTW ini 

not([type="radio" && type="checkbox"])

menurut saya lebih seperti "masukan yang tidak memiliki kedua jenis ini" :)

Jaroslav Záruba
sumber
2
Itu tidak akan berhasil, karena pemilih pertama akan memilih semua non- radio, (tetapi akan memilih checkbox), dan yang kedua akan melakukan kebalikannya. Penyatuan keduanya akan berisi checkbox dan radio .
Eric
Contoh pertama itu tidak akan && mereka bersama-sama, itu akan mengaktifkan input yang bukan radio untuk pemilih pertama, DAN input yang bukan kotak centang, yang berarti semua input :-)
Dan F
Anda salah. Kemudian, yang pertama akan diterapkan ke yang kedua, dan yang kedua, ke yang pertama.
Misiur
1

Untuk berjaga-jaga jika ada yang terjebak seperti saya. Setelah melalui pos dan beberapa hit and trial, ini berhasil untuk saya.

input:not([type="checkbox"])input:not([type="radio"])
Aurish
sumber
1

Sebuah kata peringatan. Merangkai beberapa notpemilih meningkatkan kekhususan pemilih yang dihasilkan, yang membuatnya lebih sulit untuk ditimpa: pada dasarnya Anda harus menemukan pemilih dengan semua not dan menyalin-tempelnya ke pemilih baru Anda.

Sebuah not(X or Y)pemilih akan menjadi besar untuk menghindari menggembungkan spesifisitas, tapi saya kira kita harus menempel menggabungkan berlawanan, seperti dalam jawaban ini .

Andrius R.
sumber