html5 - css 选择器not问题
问题描述
<!DOCTYPE html><html><head><style>.iSerror:not(.usermodel) input{ border:1px solid red}</style></head><body><p class='iSerror'> <input> <p class='usermodel'> <input></p></p></body></html>
结果
为什么usermodel下面的input border会变成红色呢
问题解答
回答1：.iSerror:not(.usermodel) input{ border:1px solid red} 先解释一下：.iSerror:not(.usermodel)这里只是排除了跟.iSerror的同级.usermodel，而你的结构中，.usermodel是.iSerror的子集，改成：.iSerror p:not(.usermodel) input{ border:1px solid red}试下
回答2：.iSerror:not(.usermodel) input{//这里的.iSerror:not(.usermodel), 指的是在拥有iSerror类的标签，同时不具有.usermodel这个类 border:1px solid red}
.iSerror p:not(.usermodel) input{ border:1px solid red}//html<p class='iSerror'> <p>//这个就会变红色<input> </p> <p class='usermodel'> <input> </p></p>回答3：
你是没给.usermodel直接添加样式 但是它自动继承了父类 即.iSerror的样式
回答4：这个根本就用不到:not()啊……
如果用emmet来写的话，
<p class='iSerror'> <input> <p class='usermodel'><input> </p></p>
就是.iSerror>input+.usermodel>input。
所以嘞，找第一个<input>就用.iSerror>input；找第二个<input>用.usermodel>input就好啦。
相关文章：
1. html5 - node静态资源服务器设置了Cache-Control，但浏览器从来不走3042. android - ionic应用打包部署了，但是连接不上服务器，就连写一个a标签链接到百度都不可以3. 老师百度网盘分享一下WampServer的包啊,我们下载几kb要下载一天的.4. 前端 - node vue webpack项目文件结构5. node.js - vue 子组件的菜单 如何与 父组件 通信?6. javascript - 请问如何在pc端网站调用微信支付的接口7. webpack - vue-cli写的项目（本地跑没有问题），准备放到Nginx服务器上，有什么配置需要改的？还有怎么部署？8. 微信内网页上传图片问题9. javascript - 百度的webuploader上传的问题10. javascript - echart+百度地图
网公网安备