Question

用于获取所需选择的第一个选项的正确（CSS3）方法是什么。（即我不希望此规则适用于不需要的选择元素）。我试图避免为每个必需的元素添加一个类。

示例：我只想为fontSize元素选择“请选择”选项，但不为fontColor选择“请选择”选项。

编辑：

我希望所有必需的选择都像这样，非必需选择让所有选项都为黑色。

测试：

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style>
      /* Have also tried select:first-child:required but this selects all the options in a required select */
      option:first-child:required
      {
        color: #FF0000 !important;
      }
    </style>
  </head>
  <body>
    <select required name="fontSize">
      <option value="">Please select</option>
      <option value="9">9 px</option>
      <option value="10">10 px</option>
      <option value="11">11 px</option>
      <option value="12">12 px</option>
      <option value="13">13 px</option>
      <option value="14">14 px</option>
      <option value="15" selected="">15 px</option>
      <option value="16">16 px</option>
    </select>

    <select name="fontColor">
      <option value="">Please select</option>
      <option value="red">Red</option>
      <option value="green">Green</option>
      <option value="blue">Blue</option>
    </select>
  </body>
</html>

Answer 1

编辑：我误解了这个问题。

您可以使用第n个选择器或第一个子选择器来执行此操作。

将一个类传递给select标记。

SELECT ?presLabel ?spouseLabel ?picp ?picps ?daughterLabel ?numchild ?start WHERE {

   ?pres wdt:P31 wd:Q5 .
   ?pres p:P39 ?position_held_statement .
   ?position_held_statement ps:P39 wd:Q11696 .
   ?position_held_statement pq:P580 ?start .


   ?pres wdt:P26 ?spouse .
   ?pres wdt:P40 ?childern.
   ?pres wdt:P40 ?daughter.
   ?daughter wdt:P21 wd:Q6581072.
   ?pres wdt:P1971 ?numchild.

   OPTIONAL {
        ?pres wdt:P18 ?picp
    } 

   OPTIONAL {
        ?spouse wdt:P18 ?picps
    } 

   SERVICE wikibase:label {
    bd:serviceParam wikibase:language "en" .
   }

 } ORDER BY ?start

或

<select class="sel" required name="fontSize">
  <option value="">Please select</option>
  <option value="9">9 px</option>
  <option value="10">10 px</option>
  <option value="11">11 px</option>
  <option value="12">12 px</option>
  <option value="13">13 px</option>
  <option value="14">14 px</option>
  <option value="15" selected="">15 px</option>
  <option value="16">16 px</option>
</select>




select[name="fontSize"] option:first-child {
    background: red;
}

Answer 2

要设置所需option的第一个select样式，我只需使用attribute selector，然后使用:first-child pseudo-class。

select[required] option:first-child {
  color: red;
}

<select required name="fontSize">
<option value="">Please select</option>
<option value="9">9 px</option>
<option value="10">10 px</option>
<option value="11">11 px</option>
<option value="12">12 px</option>
<option value="13">13 px</option>
<option value="14">14 px</option>
<option value="15" selected="">15 px</option>
<option value="16">16 px</option>
</select>

<select name="fontColor">
<option value="">Please select</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>

Answer 3

假设您尝试使用CSS 定位第一个select元素，您要找的是 :first-of-type 伪选择器：

＆＃13;

select:first-of-type {
  color: red;
}

＆＃13;

<select required name="fontSize">
  <option value="">Please select</option>
  <option value="9">9 px</option>
  <option value="10">10 px</option>
  <option value="11">11 px</option>
  <option value="12">12 px</option>
  <option value="13">13 px</option>
  <option value="14">14 px</option>
  <option value="15" selected="">15 px</option>
  <option value="16">16 px</option>
</select>

<select name="fontColor">
  <option value="">Please select</option>
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>

＆＃13;

如果您希望定位第一个select框的第一个选项，则可以链伪选择器：

＆＃13;

select:first-of-type option:first-of-type {
  color: red;
}

＆＃13;

<select required name="fontSize">
  <option value="">Please select</option>
  <option value="9">9 px</option>
  <option value="10">10 px</option>
  <option value="11">11 px</option>
  <option value="12">12 px</option>
  <option value="13">13 px</option>
  <option value="14">14 px</option>
  <option value="15" selected="">15 px</option>
  <option value="16">16 px</option>
</select>

<select name="fontColor">
  <option value="">Please select</option>
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>

＆＃13;

这样只会选择＆＃39;请选择＆＃39;第一个选择框（fontSize），离开＆＃39;请选择＆＃39; fontColor未经修改。

根据您的修改，您可以使用方括号{定位必需 select字段的第一个选项 { {1}} attribute selector与[required]伪选择器结合使用。

＆＃13;

:first-of-type

＆＃13;

select[required] option:first-of-type {
  color: red;
}

＆＃13;

希望这有帮助！：）

CSS选择器 - 选择所需选择的第一个选项

3 个答案: