默认情况下，是否可以将HTML元素设置为具有CSS类

Question

鉴于CSS类，默认情况下是否可以将HTML元素设置为具有该类？

例如：我不想在任何地方写<input class="input_field">，而是希望将<input>定义为始终拥有class=input_field。

要求的原因是类定义由第三方提供，可能会有变化。它包含在SASS指令中。是的，可以查找类定义是什么，并将其复制到输入元素中，但这是我想要避免的。

所以，我不是在寻找答案

input {
   ... styles in .input_field ...
}

我希望的是

input {
    class: myclass
}

答案可以使用CSS或SASS。

注意：我已经阅读了我能找到的最接近的替代question，从中我猜这是不可能的。但是，我总是怀疑这个问题，希望可能有另一个解决方案。

Answer 1

我不确定使用input选择器有什么问题，但是将一个类添加到包含 CSS元素的将会改变样式是非常简单的输入。

<div class=input_field_container>
    <input> etc.

.input_field_container input {
    /* rules */
}

Answer 2

你试过

吗？

input[class^="yourClass"]{
   color: blue;
}

来源： http://www.w3.org/TR/css3-selectors/

E [foo ^ =“bar”]一个E元素，其“foo”属性值恰好以字符串“bar”开始属性选择器

Answer 3

  

输入{       class：myclass   }

在SASS中你可以创建一个@extend。

%class-name {..}
input {
    @extend class-name
}

您可以使用％class-name将其设置为仅用作扩展，或者您可以使用.class-name并对其进行扩展或单独使用。