代码之家 › 专栏 › 技术社区 › Blackbam

css 3 row of:not():是否有方法可以更有效地编写此代码?

css-selectors attributes css3 html5 css

2

Blackbam · 技术社区 · 7 年前

有这样的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 回复 | 直到 7 年前

1

2

Temani Afif 7 年前

你能做的就是缩小它的尺寸。如果我们考虑到所有类型都是已知的这一事实, 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>

附言:我可能错了,忘记了一些类型,但逻辑是一样的,找到了最短的单词。