如何 select 两个不同输入类型的文本在一个 div 中？

Question

我有两个不同的文本输入，我想对每个输入应用不同的样式。我该怎么做？

div input[type=text] {
 background-color: #212121;
 border: none;
 color: white;
 padding: 1px 5px;
 text-align: right;
text-decoration: none;
display: inline-block;
font-size: 10px;
width: 86px;
height: 35px;
}

.contact-field {
 width: 33.33%; 
 display: inline-block;
 vertical-align: top;
}

.contact-field input {
 width: 90%;
 padding: 10px;
 border: 3px solid #dedede;
 outline: none;
 margin-bottom: 10px;
 transition: all .325s;
}

<div class="row">
  <div class="column">
    <input type="text" name="MAR 7" value="MAR 7">
 </div>
  <div class="column">
    <div class="caption">
    <h5>Ziggo Dome</h5>
    <h6>NIEUW-AMSTERDAM, NETHERLANDS</h6>
    </div>
 </div>

  <div class="main-container">
    <section class="contact-container"> 
      <form method="GET" action="#">
        <div class="contact-field">
           <input type="text" name="full-name" placeholder="Email Address" required/>
 </div>

我显然是新手。我希望你能帮助我。

Answer 1

在 css 中，要定位第一个输入，您需要这样做 - .row .column input[type="text"]

第二个像这样 - .main-container .contact-container form contact-field input[type="text"]

这将允许您对每个输入应用不同的 css 样式，而不会交叉。

如何 select 两个不同输入类型的文本在一个 div 中？

How to select two different input type text that is in a div?

html

css

text

input

selector