时间戳

首页 > 解决方案 > CLOSED CSS避免继承特定div中的输入

html - CLOSED CSS避免继承特定div中的输入

问题描述

我已经为此工作了将近 2 天，但我找不到正确的帮助来回答我的问题。我希望你能帮帮我 ：）

我有一个带有 ID（“myDiv”）的主 div 和一个使用特定属性覆盖输入的样式表。但是，有时我不想得到样式表规范。

在下面的这个例子中，input1 需要接收 css 规范，但我希望 input2 和 input3 清晰。如果可能的话，自己去那里。

我假设您理解这是来自更大样式表的小样本 =)

示例：

<div id="myDiv">
   <input id="input1" />
   <div class="Picker">
       <input id="input2" />
       <div>
           <input id="input3" />
       </div> 
   </div>
   ... Other html markup
</div>

样式表：

#myDiv input {
   width: 40%;
   border: 1px solid #c4c4c4;
}

我试过了，但它根本不起作用（:not 来自 mozilla 的文档）：

#myDiv div:not(.Picker) input {
   width: 40%;
   border: 1px solid #c4c4c4;
}

我尝试了其他方法（直接继承）：

#myDiv div:not(.Picker) > input {
   width: 40%;
   border: 1px solid #c4c4c4;
}

感谢大家的关注。为我糟糕的英语道歉:)

布布切

标签： htmlcss

解决方案

不清楚是否需要匹配#input1或其他输入

在第一种情况下使用

#myDiv input#input1 {
  ...
}

否则使用排除第一个输入:not()

#myDiv input:not(#input1) {
   ...
}

这两个选择器都具有更高的特异性，#myDiv input因此您将能够覆盖定义的属性。

推荐阅读