也说CSS之not:为样式加入例外处理

使用Octopress作为日常的博客发布工具,在加入多说评论的时候遇到了一个问题,顺带接触了css中的not选择,用来将某些Css选择器加入例外,不应用指定的css样式

用法

:not(selector),参数selector为css中的选择器,可以是元素,类,id等。如不清楚,可以查阅CSS3 选择器了解详细。

语法

lineos:false

1 2 3 4 5 6 7 8

/*单个使用*/ :not(selector) { property: value; } /*多个使用*/ :not(selector1):not(selector2) { property: value; }

例子

下面代码,所有的li元素都有一个样式,就是背景色设置为红色,这里我们把class为special和id为specialLi的li元素加入例外,不应用这个样式,我们就可以这样做。

lineos:false

1 2 3 4 5 6 7 8 9 10 11 12

<head> <style type="text/css"> li:not(.special):not(#specialLi) { background-color: red } </style> </head> <ul> <li class="special">Android</li> <li>Chrome</li> <li id="specialLi">Google Glass</li> </ul>

效果就是如下这样

  • Android
  • Chrome
  • Google Glass

其他

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏刘望舒

Flutter:手把手教你实现一个仿QQ侧滑菜单

一个类似于QQ侧滑菜单的功能,支持从上、下、左、右四个方法打开菜单栏。可以通过自定义transform实现更加炫酷的动效!   先上效果图:

44010
来自专栏非著名程序员

基础篇章:关于 React Native 的props,state,style的讲解

(友情提示:RN学习,从最基础的开始,大家不要嫌弃太基础,会的同学请自行略过,希望不要耽误已经会的同学的宝贵时间) React Native看起来很像React...

196100
来自专栏Flutter知识集

Flutter实现雨滴动画

写了几个Flutter的demo,但是对Flutter的自定义view和动画都不太了解,看到一个类似效果在android的实现,就尝试用Flutter做一下。同...

1.4K50
来自专栏影子

jQuery中的常用内容总结(二)

15940
来自专栏hightopo

HTML5矢量实现文件上传进度条

52440
来自专栏Elson's web

来,vue弹窗插件走一个

记得有一次组内分享,以弹窗为例讲了如何创建可复用的vue组件,后面发现这个例子并不恰当(bei tiao zhan),使用组件需要先import,再注册,然后再...

1.9K130
来自专栏葡萄城控件技术团队

Spread for Windows Forms高级主题(6)---数据绑定管理

自定义列和区域的数据绑定 当表单被绑定到一个数据集时,表单中的列就会相继的被分配到数据集的区域上。例如,第一个数据域分配给列A,第二个数据区域分配给列B,等等。...

235100
来自专栏陈纪庚

手把手教你实现一个引导动画

最近看了一些文章,知道了实现引导动画的基本原理,所以决定来自己亲手做一个通用的引导动画类。

13310
来自专栏Vamei实验室

被解放的姜戈05 黑面管家

Django提供一个管理数据库的app,即django.contrib.admin。这是Django最方便的功能之一。通过该app,我们可以直接经由web页面,...

22890
来自专栏hightopo

基于HT for Web矢量实现HTML5文件上传进度条

15720

扫码关注云+社区

领取腾讯云代金券