排除选择器

css :not()排除函数

css:not()函数用来排除选择,not(x),其中的x为css选择器,但是x不能是not选择器,也就是说:not()排除选择器不能嵌套使用。


css:not()排除选择器使用

.sibcont{
  background:#f1f1f1;
  border:1px solid #bababa;
  margin:20px;
  padding:20px;
}
.sibcont ul{
  margin:0;
  padding:0;
  list-style:none;
}
.sibcont ul li{
  color:#C91010;
  font-size:13px;
  line-height:26px;
}
//not选择器
.sibcont ul li:not(:first-child){
  color:#0C58A7;
}
 
<div class="sibcont">
  <ul>
    <li>妹子前端</li>
    <li>妹纸前端</li>
    <li>mooshine前端</li>
    <li>not()选择器</li>
  </ul>
</div>


我们使用css :not()排除选择器,排除了第一个子元素li,把剩下的li的颜色设置为蓝色。你可以要说我们可以直接使用:first-child来设置第一个li不就能实现了吗,这话不假,这个demo只是介绍:not()函数语法而已。


css:not()函数用在自定义按钮上

.mmbtn{
  display:inline-block;
  font-size: 13px;
  line-height:28px;
  padding:0 1.2em;
  color:#fff;
  text-decoration: none;
  border:none;
}
.mmbtn:not(.disabled){
  background:#07A725;
}
.mmbtn:not(.disabled):active{
  background:#06801C;
}
.mmbtn + .mmbtn{margin-left:12px;}
.disabled{
  background:#353535;
  cursor:default;
}
 
<div class="sibcont">
  <a href="javascript:;" class="mmbtn">按钮</a>
  <a href="javascript:;" class="mmbtn">取消</a>
  <a href="javascript:;" class="disabled mmbtn">确定</a>
</div>


这才是:not()函数的用途,这里disabled样式的按钮定义为置灰不可用的,使用not定义可用按钮的颜色,使用diabled定义不可用按钮的颜色,这样diabled样式可以写在mmbtn样式后面,也可写在前面,active伪类也使用not()函数去除disabled样式的active状态。这里用了相邻元素的选择器,如果你不明白,可以点击这里查看css +相邻元素选择器。

上面的代码使用了active的伪类,截图看不真着,你可以点击这里查看css :not()按钮。



css:not()多个否定条件的使用

:not()函数不能嵌套,但是可以并列使用

.sibcont ul li{
  color:#C91010;
  font-size:13px;
  line-height:26px;
}
.sibcont ul li:not(:first-child):not(:last-child){
  color:#0C58A7;
}


声明:本站所有文章和图片,如无特殊说明,均为原创发布。商业转载请联系作者获得授权,非商业转载请注明出处。
真诚赞赏,手留余香
赞赏
随机推荐
什么是 RESTful API 的幂等性
WordPress 的用户角色和权限
Flame 插件
Light 主题
JavaScript 原生拖放
WordPress 函数 add_option()、get_option() 和 update_option()
WordPress 评论表单函数 comment_form()
使用 svg 作为背景图片