Question

我是否可以使用CSS选择器来定位大小属性设置为1以外的选择列表？我不需要定位size =“1”或没有设置size属性。

<p>Dont target this:</p> 
<select>
  <option value="" selected="selected">Select (multi)</option><option value="0">0</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option>
</select>
<p>Do target this:</p>
<select size="5">
  <option value="" selected="selected">Select (multi)</option><option value="0">0</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option>
</select>

http://codepen.io/anon/pen/nrExe

Answer 1

根据规定，select元素的尺寸属性不 1：

Demo Fiddle

select[size]:not([size='1']) {
    color:red;
}

Answer 2

...我不需要定位size =“1”或没有设置尺寸属性。

您需要定位size属性的存在：

演示：http://jsfiddle.net/abhitalks/Gfg7n/1/

select[size] {
    background-color: red;
}

反之亦然：

select:not([size]) {
    background-color: blue;
}

Answer 3

select[size*="5"]{
  background-color: #1f6053;
}

fiddle

<强> HTML：

    <p>Dont target this:</p> 
<select>
  <option value="" selected="selected">Select (multi)</option><option value="0">0</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option>
</select>
<p>Do target this:</p>
<select size="5">
  <option value="" selected="selected">Select (multi)</option><option value="0">0</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option>
</select>

<强>的CSS：

select[size*="5"]{
  background-color: #1f6053;
}

Answer 4

假设您仅将size属性放在 2和更多选项的select元素上，您可以执行以下操作：

select[size] {
  /* :) */
}

用于大小属性不是1的选择列表的CSS选择器？

4 个答案:

Demo Fiddle