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元素的输入和后代的元素。

以下是选择器工作原理的简化示例。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您可以通过指定要从样式中排除的输入类型元素来实现此目的。

Bellow代码可以根据您的需要使用。

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

我的伪类：没有输入元素不能正常工作

2 个答案: