Строка CSS 3: not (): есть ли способ написать это более эффективно? - PullRequest
Новая
       11

Строка CSS 3: not (): есть ли способ написать это более эффективно?

0 голосов
/ 03 июля 2018

Наличие такого кода CSS (очевидно, в определенных случаях имеет смысл): 

input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
  border:1px solid #fff;
  background-color:#f3f4f5;
}
<div><input type="text" name="alpha" /></div>
<div><input type="email" name="beta" /></div>
<div><input type="number" name="gamma" /></div>
<div><input type="checkbox" name="delta" /> Really?</div>
<div><input type="file" name="epsilon" /></div>
<div><input type="submit" name="zeta" value="Here we go" /></div>

Есть ли способ написать это как: 

input:not([type="submit OR checkbox OR radio OR file"]) { // ... }

Чтобы избежать этого ряда: not ()?

1 Ответ

0 голосов
/ 03 июля 2018

Что вы можете сделать, это уменьшить его размер. Если учесть тот факт, что все типы известны, у нас есть k только внутри checkbox и f только внутри file и т. Д.

Тогда вы можете получить что-то вроде этого: 

input:not([type*="su"]):not([type*="k"]):not([type*="ra"]):not([type*="f"]) {
  border:1px solid #fff;
  background-color:#f3f4f5;
}
<div><input type="text" name="alpha" /></div>
<div><input type="email" name="beta" /></div>
<div><input type="number" name="gamma" /></div>
<div><input type="checkbox" name="delta" /> Really?</div>
<div><input type="file" name="epsilon" /></div>
<div><input type="submit" name="zeta" value="Here we go" /></div>

PS: Я могу ошибаться, забывая некоторые типы, но логика остается той же, находя самое короткое слово для использования.

...