css - 如何将属性设置回默认值？

Question

我有一个 CSS 文件，我在其中将输入设置为默认值以外的其他值。

input[type=text]{
   text-align: center;
   border: none;
   background-color: #EBEBEB;
   border-radius: 5px;
   width: 100%;
   padding: 12px;
   margin-top: 25px;
   display: inline-block;
   box-sizing: border-box;
   font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, 
  "Bitstream Vera Sans Mono", monospace;
}

现在我想使用默认值在网页上的其他地方使用这个 INPUT。我如何将其设置为仅默认为网页的特定部分而不损坏输入的其余部分？

Answer 1

您可以使用 :not 和一个额外的类来解决这个问题:

input[type=text]:not(.default) {
   text-align: center;
   border: none;
   background-color: #EBEBEB;
   border-radius: 5px;
   width: 100%;
   padding: 12px;
   margin-top: 25px;
   display: inline-block;
   box-sizing: border-box;
   font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, 
  "Bitstream Vera Sans Mono", monospace;
}

<input type="text" value="Hello StackOverflow"/>
<input class="default" type="text" value="Hello StackOverflow"/>

正如您的问题的评论中已经提到的，更好的解决方案是使用类来使用范围。所以格式只有特定的 <input type="text"/>使用类的元素!请参阅以下示例:

input[type=text].style1 {
   text-align: center;
   border: none;
   background-color: #EBEBEB;
   border-radius: 5px;
   width: 100%;
   padding: 12px;
   margin-top: 25px;
   display: inline-block;
   box-sizing: border-box;
   font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, 
  "Bitstream Vera Sans Mono", monospace;
}

<input class="style1" type="text" value="Hello StackOverflow"/>
<input type="text" value="Hello StackOverflow"/>