ID属性を使用してCSSの要素をスタイルするにはどうすればよいですか？

Question

以下のコードでは、フォーム要素に属性IDが必要ですが、その意味は分かりません。助言がありますか？

//i.stack.imgur.com/pT4GE.png

#cat-photo-form 
{ 
    background-color: green; 


} 

<form 

action = "/submit-cat-photo" id ="cat-photo-form"> 
    <label><input type="radio" name="indoor-outdoor" checked> Indoor</label> 
    <label><input type="radio" name="indoor-outdoor"> Outdoor</label> 
    <label><input type="checkbox" name="personality" checked> Loving</label> 
    <label><input type="checkbox" name="personality"> Lazy</label> 
    <label><input type="checkbox" name="personality"> Energetic</label> 
    <input type="text" placeholder="cat photo URL" required> 
    <button type="submit">Submit</button> 

</form> 

Answer 1

idとclassあなたがCSSでそれらを操作するために、要素の内側に含まatrributesです。
idは、現在のhtml要素で一意である必要があります。
しかし、複数のhtml要素で同じclassを持つことができます。 あなたの例としては、id cat-photo-form.の形をとっておいてください。id cat-form-elementを内部に入れておく必要はありません。これと同じように：

<style> 
    #cat-photo-form 
    { 
     background-color: green; 
    } 
</style> 
    <form 

    action = "/submit-cat-photo" id ="cat-photo-form"> 
     <label><input type="radio" name="indoor-outdoor" checked> Indoor</label> 
     <label><input type="radio" name="indoor-outdoor"> Outdoor</label> 
     <label><input type="checkbox" name="personality" checked> Loving</label> 
     <label><input type="checkbox" name="personality"> Lazy</label> 
     <label><input type="checkbox" name="personality"> Energetic</label> 
     <input type="text" placeholder="cat photo URL" required> 
     <button type="submit">Submit</button> 

    </form>