Question

您好我想知道如何在DIV中定位一个类

如果您知道如何修复代码笔，则会发送链接以正确的方式发回链接

我正在尝试定位ID表格和班级选择

Code Pen Link：http://codepen.io/cmbaseball94/pen/HFpdx/

HTML

<div id="forms">


        <label>First Name:</label><br>
        <input type="text" name="firstname" id="firstname" placeholder="First Name"> <br />

        <label>Last Name:</label><br>
        <input type="text" name="lastname" id="lastname" placeholder="Last Name"> <br />

        <label>Email:</label><br>
        <input type="email" name="email" id="email" placeholder="Email" required> <br />

        <label>Password:</label><br>
        <input type="password" name="password" id="password" placeholder="Password" required> <br />

        <label>Sex:</label>
        <input type="radio" name="sex" value="male">Male
        <input type="radio" name="sex" value="female">Female<br>            
        <label>Favorite Characters:</label>
        <input id="selection" type="checkbox" name="character" value="Peter">Peter
        <input type="checkbox" name="character" value="Stewie" class="selection">Lois
        <input type="checkbox" name="character" value="Stewie" class="selection">Stewie
        <input type="checkbox" name="character" value="Stewie" class="selection">Chris
        <input type="checkbox" name="character" value="Stewie" class="selection">Meg<br>


        <textarea name="textarea" rows="10" cols="50" placeholder="Write Something Here"></textarea><br>

         <label>Favorite Season:</label>
             <select id = "seasonlist">
               <option value = "1">One</option>
               <option value = "2">Two</option>
               <option value = "3">Three</option>
               <option value = "4">Four</option>
               <option value = "5">Five</option>
               <option value = "6">Six</option>
               <option value = "7">Seven</option>
               <option value = "8">Eight</option>
               <option value = "9">Nine</option>
               <option value = "10">Ten</option>
               <option value = "11">Eleven</option>
               <option value = "12">Twelve</option>
             </select> <br>

        <input type="submit"> 
        </div>

CSS

#forms {
    color: #FFF;
     width: 300px;
    margin: 0 auto;
}

???? {
    color:black;
}

Answer 1

由于selection是我在您的代码中看到的唯一一个类，我会说这是你如何做的：

编辑由于您更新了答案并确认您正在尝试设置selection类的样式，因此这是实现此目的的方法。根据您的特定标记，还有其他方法可以选择该类，但在最基本的情况下，这就是它的完成方式：

#forms .selection {
  color:black;
}

Answer 2

<div id="forms">
        <form action="mailto:cmbaseball94@gmail.com" method="post">



      <span>First Name:</span><br />
      <input type="text" name="firstname" id="firstname" placeholder="First Name" /> <br />

      <span>Last Name:</span><br />
        <input type="text" name="lastname" id="lastname" placeholder="Last Name"> <br />

      <span>Email:</span><br />
        <input type="email" name="email" id="email" placeholder="Email" required> <br />

      <span>Password:</span><br />
      <input type="password" name="password" id="password" placeholder="Password" required /> <br />

        <span>Sex:</span>
        <input type="radio" name="sex" value="male" id="male"><label for="male">Male</label> 
      <input type="radio" name="sex" value="female" id="female"><label for="female">Female</label> 
        <span>Favorite Characters:</span>
      <input id="selection" type="checkbox" name="character" value="Peter"/><label for="selection" class="selection">Peter</label> 
      <input type="checkbox" name="character" value="Stewie" id="selection"/><label for="selection" class="selection">Lois</label> 
      <input type="checkbox" name="character" value="Stewie" id="selection"/><label for="selection" class="selection">Stewie</label> 
      <input type="checkbox" name="character" value="Stewie" id="selection"/><label for="selection" class="selection">Chris</label> 
      <input type="checkbox" name="character" value="Stewie" id="selection"/><label for="selection" class="selection">Meg</label> 
      <br />


      <textarea name="textarea" rows="10" cols="50" placeholder="Write Something Here"></textarea><br />

         <span>Favorite Season:</span>
             <select id = "seasonlist">
               <option value = "1">One</option>
               <option value = "2">Two</option>
               <option value = "3">Three</option>
               <option value = "4">Four</option>
               <option value = "5">Five</option>
               <option value = "6">Six</option>
               <option value = "7">Seven</option>
               <option value = "8">Eight</option>
               <option value = "9">Nine</option>
               <option value = "10">Ten</option>
               <option value = "11">Eleven</option>
               <option value = "12">Twelve</option>
             </select> <br />

  <input type="submit" /> 
        </div>

CSS

#forms {
    color: #000;
     width: 300px;
    margin: 0 auto;
}

.selection{
    color:red;
}

Answer 3

在这种情况下，您可以简单地使用div来映射到您要定位的元素。由于这是类型提交的输入，您可以这样做：

#forms input[type="submit"]{
     background-color:black;
     color:white;
}

DEMO HERE

如何在div中选择一个类？

HTML

CSS

3 个答案: