输入属性选择器的 CSS

Question

我正在尝试为 html 中的输入框制作 css。我对 CSS 知之甚少，任何人都可以解决我的小问题。我想要所有输入框的不同样式和大小。不希望更改 html 代码。

<div class="field">
<div class="input">
<input name="post_rehub_offers[rehub_multioffer_group][0][multioffer_url]" class="vp-input input-large" value="" type="text">
</div>
</div>

<div class="field">
<div class="input">
<input name="post_rehub_offers[rehub_multioffer_group][0][multioffer_name]" class="vp-input input-large" value="" type="text">
</div>
</div>

<div class="field">
<div class="input">
<input name="post_rehub_offers[rehub_multioffer_group][0][multioffer_desc]" class="vp-input input-large" value="" type="text">
</div>
</div>

Answer 1

无需更改 html。

您可以在 attribute selector 中使用通配符

根据 MDN

[attr*=value] Represents an element with an attribute name of attr the value of which contains at least one occurrence of string "value" as substring.

由于您的输入具有不同的名称属性，我们可以针对这些属性。

您输入的名称是

1. post_rehub_offers[rehub_multioffer_group][0][multioffer_url]
2. post_rehub_offers[rehub_multioffer_group][0][multioffer_name]
3. post_rehub_offers[rehub_multioffer_group][0][multioffer_desc]

所以我们可以定位

1. 输入[name*="url"]
2. 输入[name*="name"]
3. 输入[name*="desc"]

然后像这样对它们应用你想要的任何样式:

input[name*="url"] {background:red}
input[name*="name"] {background:green}
input[name*="desc"] {background:blue}

<div class="field">
<div class="input">
<input name="post_rehub_offers[rehub_multioffer_group][0][multioffer_url]" class="vp-input input-large" value="" type="text">
</div>
</div>

<div class="field">
<div class="input">
<input name="post_rehub_offers[rehub_multioffer_group][0][multioffer_name]" class="vp-input input-large" value="" type="text">
</div>
</div>

<div class="field">
<div class="input">
<input name="post_rehub_offers[rehub_multioffer_group][0][multioffer_desc]" class="vp-input input-large" value="" type="text">
</div>
</div>