css - 我的伪类 :not with input element isn't working correctly

Question

我正在尝试使用 CSS3 input 伪类，但它不起作用。这些样式正在应用于我在 .import-holder div 中的输入。它们应该适用于除输入之外的所有内容。

.content .import-holder:not(input){
	width: 500px;
	height: 100px;
	border: 2px solid white;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

<div class="container import-holder">
   <form method="POST" action="">
      <fieldset>
      <legend>Import Excel</legend>
         <input name="filename" type="file">
         <input type="submit" value="Import">                
      </fieldset>
   </form>
</div>

Answer 1

.content .import-holder:not(input) 将选择具有 content 类的元素的后代，这些元素不是 input 元素, 并且有一个 import-holder 类。

您似乎想要 .content .import-holder *:not(input)(注意空格!)，它查找不是 .import 的输入和后代的元素-holder 元素。

这是选择器作用的简化示例。

* {
  color: red;
}

.import-holder *:not(input) {
  color: blue;
}

<div class="import-holder">
  <h1>Heading</h1>
  <p>Paragraph</p>
  <input type="text" value="Input" />
  <h2>Another heading</h2>
  <p>Paragraph with a <span>span</span> in it.</p>
</div>