Question

如何使用select标签的下方名称或ID以便将css应用于它？

<div class="span5">
  <select name="fields[abc][]" id="fields[abc]" style="width: 300px;" size="7" multiple="true">
    <option title="abc" value="abc">abc</option>
    <option title="Other" value="Other">Other</option>
  </select>
</div>

这没有用：

select[name=fields[abc][]] {    
  background-color: yellow !important;;
  border: 1px solid #ccc;
  min-height: 550px;
}

以下是fiddle

Answer 1

您的CSS选择器不正确。将您的CSS更改为：

option[title='abc'] {    
    background-color: yellow !important;;
    border: 1px solid #ccc;
    min-height: 550px;
}

工作代码段：

＆＃13;

option[title='abc'] {    
  background-color: yellow !important;;
  border: 1px solid #ccc;
  min-height: 550px;
}

＆＃13;

<body>
  <div class="span5">
    <select name="fields[abc][]" id="fields[abc]" style="width: 300px;" size="7" multiple="true">
      <option title="abc" value="abc">abc</option>
      <option title="Other" value="Other">Other </option>
    </select>
  </div>
</body>

＆＃13;

Updated jsFiddle

读取： Selectors | MDN

Answer 2

你的名字属性中有[和]，这不是一个好主意，当然你可以使用它们，你只需要在css中逃脱它们

工作小提琴：http://jsfiddle.net/cbbvb40a/1/

select[name=fields\[abc\]\[\]] {    
    background-color: yellow !important;;
    border: 1px solid #ccc;
    min-height: 550px;
}

你可以用这种方式使用css中的所有特殊字符，在这里你可以找到阅读https://mothereff.in/css-escapes

Answer 3

将属性值包含在双引号中：

select[name="fields[abc][]"] {
}

演示：

＆＃13;

select[name="fields[abc][]"] {
  background-color: yellow !important;
  border: 1px solid #ccc;
  min-height: 550px;
}

＆＃13;

<select name="fields[abc][]" id="fields[abc]" style="width: 300px;" size="7" multiple="multiple">
  <option title="abc" value="abc">abc</option>
  <option title="Other" value="Other">Other</option>
</select>

＆＃13;

Answer 4

有许多不同的解决方案。在您的具体示例中，只需编写

即可

select {

选择器可以。

或者如果您需要更具体，

div.span5 > select {

另一个是逃避方括号：

select[name=fields\[abc\]\[\]] {

或将名称放在引号

中

select[name='fields[abc][]'] {

或定位id，也使用转义括号

#fields\[abc\] {

编辑：
另一种选择，就是当你非常绝望的时候，就是继续你在原始代码中已经开始的东西，并使用内联style属性来完成整个事情。这样，您就不必使用样式表来定位任何内容。

Answer 5

根据spec，

属性值必须是标识符或字符串。

但是，fields[abc][]

不是字符串，因为它没有引号：

字符串可以用双引号或单引号书写。
不是identifier，因为它包含[和]：

标识符只能包含字符[a-zA-Z0-9]和ISO 10646字符U + 00A0及更高版本，加上连字符（ - ）和下划线（_）;他们不能以数字，两个连字符或a开头连字符后跟一个数字。标识符也可以包含转义字符和任何ISO 10646字符作为数字代码（请参阅下一个项）。

要修复它，你可以

使用字符串："fields[abc][]"或'fields[abc][]'。

select[name="fields[abc][]"] {    
    background-color: yellow !important;;
    border: 1px solid #ccc;
    min-height: 550px;
}

<div class="span5">
  <select name="fields[abc][]" id="fields[abc]" style="width: 300px;" size="7" multiple="true">
    <option title="abc" value="abc">abc</option>
    <option title="Other" value="Other">Other </option>
  </select>
</div>

使用有效的标识符，转义必要的字符
反斜杠转义允许作者引用他们不能的字符   轻松放入文件。在这种情况下，反斜杠后跟   最多六个十六进制数字（0..9A..F），代表ISO   带有该数字的10646（[ISO10646]）字符，不得为零。   （在CSS 2.1中未定义如果样式表确实包含，会发生什么   Unicode代码点为零的字符。）如果范围内的字符   [0-9a-fA-F]遵循十六进制数，即数字的结尾   需要弄清楚。有两种方法可以做到这一点：
- 带空格（或其他空格字符）：“\ 26 B”（“＆amp; B”）。在这种情况下，用户代理应将“CR / LF”对（U + 000D / U + 000A）视为一个空白字符。
- 提供正好6个十六进制数字：“\ 000026B”（“＆amp; B”）
然后，
- 使用[，\[或\5b
- 使用]，\]或\5d
例如，fields\[abc\00005d\5b \]。
```
select[name=fields\[abc\00005d\5b \]] {    
    background-color: yellow !important;;
    border: 1px solid #ccc;
    min-height: 550px;
}
```
```
<div class="span5">
  <select name="fields[abc][]" id="fields[abc]" style="width: 300px;" size="7" multiple="true">
    <option title="abc" value="abc">abc</option>
    <option title="Other" value="Other">Other </option>
  </select>
</div>
```

将CSS应用于HTML选择标记

5 个答案: