html - 如何选择 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 样式应用于您的每个输入，而不会交叉。