【问题标题】: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 中有inputtextarea 时都应该应用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 TEXTAREAINPUT[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;}
      

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2017-07-12
        • 2017-04-13
        • 2013-07-27
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多