使用多个 :not 伪类在 CSS 选择器中排除多个 div答案

【问题标题】：Exclude multiple divs in CSS selector using multiple :not pseudo class使用多个 :not 伪类在 CSS 选择器中排除多个 div
【发布时间】：2017-06-30 06:28:59
【问题描述】：

我有一些 html 代码，我想在其中将特定样式的红色字体和 250px 宽度应用于按钮或文本类型的所有输入元素，但仅限于具有 div2类的 div > 或 .div3。这显示在下面粘贴的屏幕截图中。

换句话说，我试图为具有类 RadWindow 的 div 以及具有 id div1 的 div 排除这种特定样式。我尝试过的 CSS 什么都不做。

问题：什么是正确的 CSS 选择器，可以将上述 div 排除在特定样式 color: red; width :250px 之外？

 .RadWindow, #div1, .div2, .div3 {
     margin:20px;
    }
  div:not(.RadWindow):not(#div1)   input[type='button'],div:not(.RadWindow):not(#div1)  input[type='text']  {
        width: 250px;
        color: red;
    }
    div:not(.RadWindow):not(#div1) {
     font-weight:bold;
    }

<div class="RadWindow">
<div>
   <div>
   RadWindow div (should not be red color)
   </div>
   <div>
      <input type="button" value="Button 1 in RadWindow" />
   </div>
   <div>
     <input type="text" value="textbox 1 in RadWindow" />
   </div>
</div>
</div>
<div id="div1"> 
<div>
 <div>
   div1 div (should not be red color)
   </div>
 <div>
      <input type="button" value="Button 1 in div1" />
   </div>
   <div>
     <input type="text" value="TextBox 1 in div1" />
   </div>
   </div>
</div>
 <div class="div2">
  <div>
   div2 div (should be red color)
   </div>
   <div>
      <input type="button" value="Button 1 in div2" />
   </div>
   <div>
     <input type="text" value="Textbox 1 in div2" />
   </div>
</div>   
<div class="div3">
  <div>
   div3 div (should be red color)
   </div>
   <div>
      <input type="button" value="Button 1 in div3" />
   </div>
   <div>
     <input type="text" value="Textbox 1 in div3" />
   </div>
</div>

【问题讨论】：

听说:not元素支持不好。
在 CSS3 中，我认为它是否得到了很好的支持？
@TheBlackBenzKid：10 年前确实如此。
在您的标记和this guy's 之间，我不确定谁患有更严重的白癜风。
@Sunil 在您的 div 代码层次结构中，前 2 个 div（RadWindow，div1）和后 2 个 div（div2，div3）是不同的。请你告诉这是错误的还是你也有这个

标签： html css css-selectors

【解决方案1】：

这是你想要的结果吗？

.RadWindow, #div1, .div2, .div3 {
     margin:20px;
    }  
    :not(.RadWindow):not(#div1)>div>div>input[type='button'],:not(.RadWindow):not(#div1)>div>div>input[type='text']
    {
        width: 250px !important;
        color: red !important;
    }
    div:not(.RadWindow):not(#div1) {
     font-weight:bold;
    }

<div class="RadWindow">
<div>
   <div>
   RadWindow div (should not be red color)
   </div>
   <div>
      <input type="button" value="Button 1 in RadWindow" />
   </div>
   <div>
     <input type="text" value="textbox 1 in RadWindow" />
   </div>
</div>
</div>
<div id="div1"> 
<div>
 <div>
   div1 div (should not be red color)
   </div>
 <div>
      <input type="button" value="Button 1 in div1" />
   </div>
   <div>
     <input type="text" value="TextBox 1 in div1" />
   </div>
   </div>
</div>
 <div class="div2">
  <div>
   div2 div (should be red color)
   </div>
   <div>
      <input type="button" value="Button 1 in div2" />
   </div>
   <div>
     <input type="text" value="Textbox 1 in div2" />
   </div>
</div>   
<div class="div3">
  <div>
   div3 div (should be red color)
   </div>
   <div>
      <input type="button" value="Button 1 in div3" />
   </div>
   <div>
     <input type="text" value="Textbox 1 in div3" />
   </div>
</div>

【讨论】：

【解决方案2】：

我做了一个不使用:not()的版本。

.RadWindow, #div1, .div2, .div3 {
  margin:20px;
}

input[type='button'],
input[type='text'] {
  width: 250px;
  color: red;
}
.RadWindow input[type='button'],
.RadWindow input[type='text'],
div#div1 input[type='button'],
div#div1 input[type='text'] {
  color: initial;
}
div[id^="div"] {
  font-weight:bold;
}

<div class="RadWindow">
  <div>
    <div>
      RadWindow div (should not be red color)
    </div>
    <div>
      <input type="button" value="Button 1 in RadWindow" />
    </div>
    <div>
      <input type="text" value="textbox 1 in RadWindow" />
    </div>
  </div>
</div>
<div id="div1"> 
  <div>
    <div>
      div1 div (should not be red color)
    </div>
    <div>
      <input type="button" value="Button 1 in div1" />
    </div>
    <div>
      <input type="text" value="TextBox 1 in div1" />
    </div>
  </div>
</div>
<div class="div2">
  <div>
    div2 div (should be red color)
  </div>
  <div>
    <input type="button" value="Button 1 in div2" />
  </div>
  <div>
    <input type="text" value="Textbox 1 in div2" />
  </div>
</div>   
<div class="div3">
  <div>
    div3 div (should be red color)
  </div>
  <div>
    <input type="button" value="Button 1 in div3" />
  </div>
  <div>
    <input type="text" value="Textbox 1 in div3" />
  </div>
</div>

【讨论】：