Question

我有以下代码，我想隐藏选择框的最后一个选项，即选项 - 3

select[name="test"]:not(optgroup) option:last-child {
  display: none;
}

<select name="test">
  <option value="one">1</option>
  <optgroup label="emails">
    <option value="two">2</option>
  </optgroup>
  <option value="three">3</option>
</select>

但上面的CSS代码不起作用。

非常感谢任何帮助。提前谢谢。

Answer 1

请参阅下面的尝试

＆＃xA;＆＃xA;

＆＃xD;＆＃xA;

 选择选项[value = 3] {＆＃xD;＆＃xA; display：none;＆＃xD;＆＃xA;}

＆＃xD;＆＃xA;

  ＆lt; select name =“test”＆gt;＆＃xD;＆＃xA; ＆lt; option value =“one”＆gt; 1＆lt; / option＆gt;＆＃xD;＆＃xA; ＆lt; optgroup label =“email”＆gt;＆＃xD;＆＃xA; ＆lt; option value =“two”＆gt; 2＆lt; / option＆gt;＆＃xD;＆＃xA; ＆LT; / OPTGROUP＆GT;＆＃的xD;＆＃XA; ＆lt; option value =“three”＆gt; 3＆lt; / option＆gt;＆＃xD;＆＃xA;＆lt; / select＆gt;

＆＃xD;＆＃xA;

＆＃的xD;＆＃XA;

＆＃XA;

Answer 2

基本上你想要的是隐藏option元素的最后一个直接select子元素：

select > option:last-child { display: none; }

<select name="test">
    <option value="one">1</option>
    <optgroup label="emails">
    <option value="two">2</option>
    </optgroup>
    <option value="three">3</option>
    </select>

Answer 3

只需对CSS进行一次小编辑即可。 :)

＆＃13;

select[name="test"] > option:last-child { display: none;}

＆＃13;

 <select name="test">
    <option value="one">1</option>
    <optgroup label="emails">
    <option value="two">2</option>
    </optgroup>
    <option value="three">3</option>
    </select>

＆＃13;

Answer 4

你也可以像这样使用值选择器：

option[value="three"] {
  display: none;
}

<select name="test">
  <option value="one">1</option>
  <optgroup label="emails">
    <option value="two">2</option>
  </optgroup>
  <option value="three">3</option>
</select>

使用css隐藏选择框中的选项

4 个答案: