Question

具有这样的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（）？

Answer 1

您可以做的是减小其尺寸。如果考虑到所有类型都是已知的事实，则仅在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：我可能会忘记某些类型，但逻辑却保持不变，找到了最短的单词。

CSS 3的：not（）行：有没有办法更有效地编写此代码？

1 个答案: