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

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

css-selectors attributes css3 html5 css

Blackbam · 技术社区 · 6 年前

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

Temani Afif 6 年前

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

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

推荐文章

Monica · 使用Selenium和Python在没有url的情况下单击下载文件

2 年前

Kevin Rodgers Jr. · Python BeautifulSoup:在in select语句中排除其他标记

2 年前

Arad · 即使使用相同的选择器,外部样式表也会覆盖内部样式表

7 年前

user1032531 · jQuery Validate require\u from\u group并按名称选择

7 年前

Christian Luneborg · 星级评定不起作用

7 年前

Gabriel Morais · CSS未应用媒体查询

7 年前

Kevin · CSS属性选择器中的“i”是什么意思?[副本]

7 年前

S syed · 如何在javascript中删除DIV标记内的CSS类?[副本]

7 年前

Karos papermoon · Div和定位问题

7 年前

user9549074 · 如何从CSS中的输入文本中设置最后一个字符的样式?

7 年前