html - 忽略另一个 div 类中 INPUT 的集合元素

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;
}

此输入干扰了我不想干扰的另一个输入。

我希望另一个输入文本具有以下元素:

#text_bar{
   width: 65%;
   height: 70%;
   text-align: center;
   border-radius: 10px;
   font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace;
   border: none;
   position: absolute;
   left: 5px;
   top:13%;
}

<div id="searchBox">
  <form action="http://dev.didieranddandelion.co.uk/shop/product-searched.php" method="post" id="search_form">
      <input name="search_input" type="text" id="text_bar" placeholder="Search Bar">
      <input type="submit" id="search_btn" value="Search">
  </form>
</div>

我怎样才能让输入忽略来自 css 的那些元素，只保留来自 text_bar 的元素？

Answer 1

你有两个选择:

1) 使用 :not 选择器

[type=text] { /* applies to all text inputs */
  border: 5px solid red;
}
[type=text]:not(#someID) { /* applies to all text inputs except with id someID */
  border: 5px solid blue;
}

<input type="text" />
<input type="text" id="someID" />

2) 覆盖属性

[type=text] { /* applies to all text inputs */
  border: 5px solid blue;
}
#someID { /* overrules the above CSS, while id is more specific selector */
  border: 5px solid red;
}

<input type="text" />
<input type="text" id="someID" />