问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

css 选择器not问题

头像
using00
    7121522
    <!DOCTYPE html>
<html>
<head>
<style>
.iSerror:not(.usermodel) input{
  border:1px solid red
}
</style>
</head>
<body>
<div class="iSerror">
 <input>
 <div class="usermodel">
  <input>
</div>
</div>

</body>
</html>

    结果
    clipboard.png 为什么usermodel下面的input border会变成红色呢

    html5css3css选择器
    阅读 4k
    4 个回答
    得票最新
    头像
    七橘子
      63831630

      .iSerror:not(.usermodel) input{
      border:1px solid red
      } 先解释一下：.iSerror:not(.usermodel)这里只是排除了跟.iSerror的同级.usermodel，而你的结构中，.usermodel是.iSerror的子集，改成：
      .iSerror div:not(.usermodel) input{
      border:1px solid red
      }试下

      头像
      yiiouo
        71721829
        .iSerror:not(.usermodel) input{
//这里的.iSerror:not(.usermodel), 指的是在拥有iSerror类的标签，同时不具有.usermodel这个类
  border:1px solid red
}
        .iSerror div:not(.usermodel) input{
  border:1px solid red
}
//html
<div class="iSerror">
    <div>
        //这个就会变红色
        <input>
    </div>
     
     <div class="usermodel">
      <input>
    </div>
</div>
        头像
        gatinul
          2431919

          你是没给.usermodel直接添加样式 但是它自动继承了父类 即.iSerror的样式

          头像
          某熊猫桑
            16.1k61547

            这个根本就用不到:not()啊……

            如果用emmet来写的话，

            <div class="iSerror">
    <input>
    <div class="usermodel">
        <input>
    </div>
</div>

            就是.iSerror>input+.usermodel>input。

            所以嘞，找第一个<input>就用.iSerror>input；找第二个<input>用.usermodel>input就好啦。

            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            推荐问题