我无法在CSS的表单标签内选择输入提交按钮

Question

作为该主题的参考，尽管我尝试通过使用nth-child，nth-type-of，[type = submit]等来更改CSS上的代码，但无法选择提交。如果有人知道我们如何访问css上的元素，请帮帮我。

#subButton{
      padding: 2% 7%;
      background: #e32b7a;
      text-align: center;
      border: none;
      color: white;
      text-transform: uppercase;
      font-size: 10pt;
      letter-spacing: 0.02em;
      transition: all .3s;
      position: relative;
      margin: 24px 0 0 0;
      overflow: hidden;
      z-index: 1;
    }
    #subButton:after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: none;
      background-color: #f42988;
      color: white;
      z-index: -2;
    }
    #subButton:before {
      content: '';
      color: cornsilk;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0%;
      height: 100%;
      background-color: #db257a;
      text-align: left;
      transition: all .3s;
      z-index: -1;
    }
    #subButton:hover {
      color: #fff;
    }
    #subButton:hover:before {
      width: 100%;
    }
    

<section class="newsLetter">
          <h1><i>Better design info gives you better inspiration.</i></h1>
          <form method="post" action="send2.php" class="content">
                  <div><input type="text" name="name" placeholder="Name" required></div>
                  <div><input type="text" name="email" placeholder="Email" required></div>
                  <div><input type="submit" id="subButton" value="Subscribe"></div>
          </form>
</section>

Answer 1

您可以使用input[type=submit]或input:nth-child(3)代替#subButton。

Answer 2

使用!important规则通过id属性优先于修饰。

#subButton {
  padding: 2% 7%;
  background: #e32b7a;
  text-align: center;
  border: none;
  color: white;
  text-transform: uppercase;
  font-size: 10pt;
  letter-spacing: 0.02em;
  transition: all .3s;
  position: relative;
  margin: 24px 0 0 0;
  overflow: hidden;
  z-index: 1;
}

#subButton:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  background-color: #f42988;
  color: white;
  z-index: -2;
}

#subButton:before {
  content: '';
  color: cornsilk;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background-color: #db257a;
  text-align: left;
  transition: all .3s;
  z-index: -1;
}

#subButton:hover {
  color: #fff;
}

#subButton:hover:before {
  width: 100%;
}

.newsLetter input[type="submit"] {
  background: red !important;
}

<section class="newsLetter">
  <h1><i>Better design info gives you better inspiration.</i></h1>
  <form method="post" action="send2.php" class="content">
    <div><input type="text" name="name" placeholder="Name" required></div>
    <div><input type="text" name="email" placeholder="Email" required></div>
    <div><input type="submit" id="subButton" value="Subscribe"></div>
  </form>
</section>

或仅使用id属性的值作为选择器。

#subButton {
  padding: 2% 7%;
  background: #e32b7a;
  text-align: center;
  border: none;
  color: white;
  text-transform: uppercase;
  font-size: 10pt;
  letter-spacing: 0.02em;
  transition: all .3s;
  position: relative;
  margin: 24px 0 0 0;
  overflow: hidden;
  z-index: 1;
  background: red !important;
}

#subButton:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  background-color: #f42988;
  color: white;
  z-index: -2;
}

#subButton:before {
  content: '';
  color: cornsilk;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background-color: #db257a;
  text-align: left;
  transition: all .3s;
  z-index: -1;
}

#subButton:hover {
  color: #fff;
}

#subButton:hover:before {
  width: 100%;
}

<section class="newsLetter">
  <h1><i>Better design info gives you better inspiration.</i></h1>
  <form method="post" action="send2.php" class="content">
    <div><input type="text" name="name" placeholder="Name" required></div>
    <div><input type="text" name="email" placeholder="Email" required></div>
    <div><input type="submit" id="subButton" value="Subscribe"></div>
  </form>
</section>