CSS 逗号用法答案

【问题标题】：CSS Comma UsageCSS 逗号用法
【发布时间】：2011-07-28 03:34:47
【问题描述】：

下面是一些 CSS 代码。

.form-field {min-height: 20px; margin-bottom: 10px; padding-top: 4px; width: 80px;}
.form-field TEXTAREA, INPUT[type='text'] {position: absolute; left: 100px; top: 0px; height: 15px;}
.form-field TEXTAREA {height: 80px;}

所以每次在div.form-field 中有input 或textarea 时都应该应用css。

尽管在任何地方都只是 INPUT[type='text']（甚至在 .form-field 之外），但 CSS 会被应用。我该如何阻止它这样做？

【问题讨论】：

标签： html css css-selectors

【解决方案1】：

.form-field TEXTAREA, .form-field INPUT[type='text']{

【讨论】：

【解决方案2】：

逗号分隔整个选择器。所以.form-field TEXTAREA, INPUT[type='text'] 选择.form-field TEXTAREA 和INPUT[type='text']。

您可能感兴趣的是:matches() selector。目前，这仅在 FireFox 中以:-moz-any() selector 的形式提供。这使您可以编写：

.form-field:-moz-any(TEXTAREA, INPUT[type='text'])

不过，还是一起去比较安全

.form-field TEXTAREA, .form-field INPUT[type='text']

附带说明，HTML 标记名称应为小写。所以你真的应该使用

.form-field textarea, .form-field input[type='text']

【讨论】：

在 CSS4 上声明 dibs，我明白了：P
哦，我明白了。感谢那里的一些我不知道的事情。谢谢。

【解决方案3】：

你想要的，或者，忽略这个。

+“匹配任何紧跟在同级元素 E 之前的 F 元素。” 来源：W3

.form-field TEXTAREA + INPUT[type='text'] {position: absolute; left: 100px; top: 0px; height: 15px;}

【讨论】：