如何将nth-child用作选择标签选项

时间:2018-12-05 08:39:46

标签: html css

我有以下格式,我想知道是否可以在这里使用nth-child,因为只有在我使用nth-child(3)而不是nth-child(0)时我才能使它工作第一个选项应该以0开头?我想从订阅计划选择名称中选择第一个选项:

<div class="update_form">
    <form class="signup-form" action="upgrade.php" method ="POST">
        <br></br>
        <select name="subscriptionplan">
            <option value="">Choose a plan</option>
            <option value="None">None</option>
            <option value="Level 1">Level 1</option>
            <option value="Level 2">Level 2</option>
            <option value="Level 3">Level 3</option>
        </select>
        <br></br>
        <div class="pricing">
            <select name="pricing_level1">
                <option value="">Choose a price plan for Level 1</option>
                <option value="None">None</option>
                <option value="100">Monthly:$100</option>
                <option value="800">Yearly:$800</option>
            </select>
            <br></br>
            <select name="pricing_level2">
                <option value="">Choose a price plan for Level 2</option>
                <option value="None">None</option>
                <option value="150">Monthly:$150</option>
                <option value="1300">Yearly:$1300</option>
            </select>
            <br></br>
            <select name="pricing_level3">
                <option value="">Choose a price plan for Level 3</option>
                <option value="None">None</option>
                <option value="200">Monthly:$200</option>
                <option value="1800">Yearly:$1800</option>
            </select>
        </div>
        <br></br>
        <button type="submit" name="submit">Upgrade Plan</button>
        <button type="submit" name="upload">Upload Document</button>
    </form>
</div>
<br></br>
<br></br>
<br></br>
<div class="subscription_form">
<form class="subscription-form" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<table>
<tr>
    <td><input type="hidden" name="on0" value=""></td>
</tr>
<tr>
    <td>
        <select name="os0">
            <option value="Level 1 monthly">Level 1 monthly : $100.00 AUD - monthly</option>
            <option value="Level 2 monthly">Level 2 monthly : $150.00 AUD - monthly</option>
            <option value="Level 3 monthly">Level 3 monthly : $200.00 AUD - monthly</option>
            <option value="Level 1 yearly">Level 1 yearly : $800.00 AUD - yearly</option>
            <option value="Level 2 yearly">Level 2 yearly : $1,300.00 AUD - yearly</option>
            <option value="Level 3 yearly">Level 3 yearly : $1,800.00 AUD - yearly</option>
        </select>
    </td>
</tr>

1 个答案:

答案 0 :(得分:0)

第一个孩子是:nth-child(1)

使用select[name="subscriptionplan"] option:nth-child(1)

select[name="subscriptionplan"] option:nth-child(1){
color:red;
}
<select name="subscriptionplan">

<option value="">Choose a plan</option>
<option value="None">None</option>
<option value="Level 1">Level 1</option>
<option value="Level 2">Level 2</option>
<option value="Level 3">Level 3</option>
  </select>