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并使用默认值。如何将其设置为仅默认为网页的特定部分，而不会损坏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"/>

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

1 个答案: