我只想选择前两个输入元素答案

【问题标题】：i just want to select First two inputs elements我只想选择前两个输入元素
【发布时间】：2022-01-12 11:32:48
【问题描述】：

我只想选择前两个输入而不是最后两个。所以请帮我解决这个问题，并给出一个简短的例子，如果可能的话，不要选择

 .converter .MainConversion input{
  display: block;
  margin: auto;
  width: 30%;
  font-size: 20px;
  padding: 3px;
  border: 0px;
  font-family: Montserrat;
  font-weight: 600;
  border-radius: 20px;
  margin-top: 10px;
  margin-bottom: 30px;
  text-align: center;
  background-color: rgb(177, 177, 177);
}

   <div class="converter">
          <div class="MainConversion">
            <div id="displayresult">
                <h5 id="HeaderDisplay">Enter the Value</h5>
                <p id="MistakeDisplay">Enter a width and height you want to convert for ????</p>
            </div>  
            <label for="ScreenWidth">Screen Width</label>
            <input type="text" name="ScreenWidth" id="ScreenWidth" placeholder="Enter the Width">
            <label for="ScreenHeight">Screen Height</label>
            <input type="text" name="ScreenHeight" id="ScreenHeight" placeholder="Enter the height">
            <label for="PxtoVw" >Number of Vw units</label>
            <input type="text" name="PxtoVw" id="PxtoVW" placeholder="Enter the Value">
            <p id="PxtoVwResult"></p>
            <label for="PxtoVh" >Number of Vh Units</label>
            <input type="text" name="PxtoVh" id="PxtoVh" placeholder="Enter the Value">
            <p id="PxtoVhResult"></p>
            <button class="DeviceButton" onclick="Calculate()">Check</button>
            <button class="DeviceButton" onclick="Clear()">Clear</button>
          </div>
        </div>

【问题讨论】：

请更详细地描述您想要实现的目标。你想disable 输入除前两个之外的所有输入吗？

标签： html css input

【解决方案1】：

这里有两种可能性：

最简单的：在您想要获取的所有输入上添加一个类，然后像 document.querySelectorAll('.classYouAdd'); 一样选择它们。

或者：

将相同的类添加到您要选择的输入中。
选择所有输入，例如 document.querySelectorAll("input");
对您刚刚获得的所有输入进行条件检查，以检查它们是否具有您设置的类。

https://developer.mozilla.org/fr/docs/Web/API/Document/querySelectorAll

【讨论】：

【解决方案2】：

在这种情况下，您可以使用著名的伪选择器 nth-child(n) 来选择第一个 to。了解更多https://www.w3schools.com/cssref/sel_nth-child.asp 以下是您的情况：

.converter .MainConversion input:nth-child(1),  .converter .MainConversion input:nth-child(2){
..
}

但是，更推荐的方法是为两个输入都指定一个类，例如“my-input”，然后指定样式：

.my-input{
  ..
}

【讨论】：

【解决方案3】：

这是你需要的

.MainConversion input:nth-of-type(-n+2) {
  background-color: blue; }

通过这种方式，您可以选择 .MainConversion 中的前两个输入元素，然后给出您想要的样式，在我的例子中，我添加了蓝色背景。

【讨论】：