如何CSS：第一胎選擇工作

-1

<form class="job-manager-form" enctype="multipart/form-data"> 



    <fieldset> 
    <label>Have an account?</label> 
    <div class="field account-sign-in"> 
     <a class="button" href="">Sign in</a> 

    </div> 
    </fieldset> 


    <!-- Job Information Fields --> 

    <fieldset class="fieldset-job_title"> 
    <label for="job_title">Job Title</label> 
    <div class="field required-field"> 
     <input type="text" class="input-text" required=""> 
    </div> 
    </fieldset> 

    <fieldset class="fieldset-job_location"> 
    <label for="job_location">Location <small>(optional)</small></label> 
    <div class="field "> 
     <input type="text" class="input-text" name="job_location" id="job_location" placeholder="e.g. &quot;London&quot;" value="" maxlength=""> 
     <small class="description">Leave this blank if the location is not important</small> </div> 
    </fieldset> 

    <fieldset class="fieldset-application"> 
    <label for="application">Application email/URL</label> 
    <div class="field required-field"> 
     <input type="text" class="input-text" name="application" id="application" placeholder="Enter an email address or website URL" value="" maxlength="" required=""> 
    </div> 
    </fieldset> 

</form>

而且我想在窗體中選擇第一個字段集。這是我在做什麼：

form.job-manager-form:first-child { 
    background-color: red; 
}

但它選擇所有fieldset元素。怎麼做：第一個孩子的作品？

的jsfiddle是here。

來源

2016-12-21 torayeff

如果該元素是其父元素的第一個孩子，那麼'first-child'將修改前面的元素*。通過做'form.job-manager-form：first-child'，你會說'在哪裏工作經理形式是第一個孩子，將其背景改爲紅色。所以，因爲這是頁面上的第一件事，整個表單的背景將是紅色的。 – Santi

您正在使用字段集不正確。一個字段集合**一組字段**，應該有一個「」來描述該集合，並且其中的每個字段都應該有一個「」來描述特定的字段。例如'

收藏單選按鈕這一個<用於= 「b」的標籤>此另一個

' – Quentin

你需要針對你想要的元素，然後說這是第一胎。

有一個很好的文章，解釋這些選擇是如何工作的：

useful-nth-child-recipies

fieldset:first-child { 
 
    background-color: red; 
 
}

<form class="job-manager-form" enctype="multipart/form-data"> 
 

 
    <fieldset> 
 
    <label>Have an account?</label> 
 
    <div class="field account-sign-in"> 
 
     <a class="button" href="">Sign in</a> 
 

 
    </div> 
 
    </fieldset> 
 

 

 
    <!-- Job Information Fields --> 
 

 
    <fieldset class="fieldset-job_title"> 
 
    <label for="job_title">Job Title</label> 
 
    <div class="field required-field"> 
 
     <input type="text" class="input-text" required=""> 
 
    </div> 
 
    </fieldset> 
 

 
    <fieldset class="fieldset-job_location"> 
 
    <label for="job_location">Location <small>(optional)</small></label> 
 
    <div class="field "> 
 
     <input type="text" class="input-text" name="job_location" id="job_location" placeholder="e.g. &quot;London&quot;" value="" maxlength=""> 
 
     <small class="description">Leave this blank if the location is not important</small> </div> 
 
    </fieldset> 
 

 
    <fieldset class="fieldset-application"> 
 
    <label for="application">Application email/URL</label> 
 
    <div class="field required-field"> 
 
     <input type="text" class="input-text" name="application" id="application" placeholder="Enter an email address or website URL" value="" maxlength="" required=""> 
 
    </div> 
 
    </fieldset> 
 

 
</form>

來源

2016-12-21 17:22:01

如果它是其父的第一個子它選擇的元素。

你選擇不選擇任何字段集。它選擇表單。

的字段集有一個（默認）透明背景，這樣你就可以通過他們看到了紅色。

要選擇字段集是一種形式的第一個孩子，你將需要：

form.job-manager-form > fieldset:first-child

來源

2016-12-21 17:21:36 Quentin

fieldset:first-child { 
    background-color: red; 
}

這將工作。但是，您的第一個子字段將設置爲顯示：無;所以它不會真正顯示背景顏色。

來源

2016-12-21 17:22:36 rob

如何CSS：第一胎選擇工作

回答

相關問題