你一无所知的CSS
也许标题有点夸大了。虽然不能完全保证大家都不知道这些,但是这也算是一个好机会检测下你是否知道或使用过下面的内容。
Selectors
Root
:root { }
使用root可以让你在DOM中选择最高级父元素。如果你在写HTML,那么htnl元素永远是最高的。因为对于一个目标元素伪类选择器有更高特性,你可以用:root重写元素。
使用:root改变背景颜色
First Line
::first-line 选择器可以让你选择段落第一行,当然,还有其他选择器让你可以选择第一段,但是使用这个方式,可以设计第一行样式,有更大的设计空间。
更令让惊喜的功能,该选择器可以重写。相当棒的,不是吗。
改变段落第一行元素
First Letter
::first-letter
和上面个的很相似,该选择器可以让我们选择块级元素的第一个字母。这让我们在设计首字下沉是非常方便快捷。
::first-letter首字下沉效果
Not Selector
:not(x)
:not(x)选择器在你没有指定时选择目标元素,下面的例子将为你详细说明。
List Item
List Item
List Item
List Item
不使用"active",也可以选择所有项目,只需要下面的代码:
ul li:not(.active) {}
该方式对于添加导航元素相当方便,看看上面的例子,你就知道。
使用:not() 选择所有列出的元素,不使用active
Combinators
直接相邻选择符
span + span
技术上来说,这不是一个选择器,但可以把两个选择器放在一起。使用"+",可以直接选择元素,把另外一个放在后面。下面是例子:
Lorem ipsum blah blah blah
Lorem ipsum blah blah blah
Lorem ipsum blah blah blah
使用下面CSS:
blockquote + p { font-weight: bold; }
第二段元素就会加粗。
引用元素后面使用相邻选择符
General Sibling Combinator
普通相邻选择符
figure ~ p {}
使用你设计的页面层次结构,就是他了。例如,使用上面的代码,只影响图形元素后的段落元素。
原文章:http://www.topthink.com/topic/5937.html
你一无所知的CSS的更多相关文章
- Matplotlib数据可视化(3):文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
- html+css学习笔记:实用LessColor函数搭建配色方案
http://www.zcool.com.cn/article/ZMTUyNDc2.html 前言:用LESS CSS框架进行编码会简化代码结构,提高我们的工作效率,但是试验后你会发现,默认情况下,L ...
- 我的CSS 入门1
CSS(Cascading Style Sheets)级联样式表.我现在所知的,她的存在能够更好的管理多个HTML文件,或者是为了使得网页设计更为丰富多彩,“简单可依赖”. 如果你对HTML一无所知, ...
- 转:css中overflow:hidden 不起作用了吗?
css中overflow:hidden 不起作用了吗? 有同学遇到这样的问题,现象是给元素设置了overflow:hidden,但超出容器的部分并没有被隐藏,难道是设置的hidden失效了吗?其实看似 ...
- 用Less定义常用的CSS3效果函数及常用颜色搭配(让CSS写起来更有趣)
定义圆角及调用 /* 定义圆角 @radius 圆角大小 */ .round(@radius:5px){ border-radius:@radius; -webkit-border-radius: @ ...
- CSS变量(自定义属性)实践指南
本文翻译自:https://www.sitepoint.com/practical-guide-css-variables-custom-properties/ 转载请注明出处:葡萄城官网,葡萄城为开 ...
- 2017年3月1日09:45:39 css选择器,session数据取不到
昨天碰到了一个问题,通过输入指定的url进行登录在服务端将url存在session中但是登陆之后因为页面提交的登录请求是ajax请求,在后端提取session时获取不当之前存的url,老司机说不是同一 ...
- CSS的未来
仅供参考 前言 完成<CSS核心技术与实战>这本书,已有一个多月了,而这篇文章原本是打算写在那本书里面的,但本章讲解的内容,毕竟属于CSS未来的范畴,而这一切都还不能够确定下来,所以这一章 ...
- 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧
记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...
随机推荐
- request.getParameter(“参数名”) 中文乱码解决方法
今天浏览项目时候,遇到一个问题,页面用${requestScope.参数名 }获取的值是乱码,然后搜了一下,最后说是编码的问题,附上查找的结果: 在Java 开发中,如果框架搭建的不完善或者初学者在学 ...
- jQuery动画特效实例教程
本文以实例形式详细讲述了jQuery动画特效的实现方法. 1.自制折叠内容块 内容块如下: <div class="module"> <div cla ...
- iOS之搜索框UISearchController的使用(iOS8.0以后替代UISearchBar+display)
在iOS 8.0以上版本中, 我们可以使用UISearchController来非常方便地在UITableView中添加搜索框. 而在之前版本中, 我们还是必须使用UISearchBar + UISe ...
- Android log 管理工具
1.logger 项目地址: https://github.com/orhanobut/logger 2.KLog 项目地址:https://github.com/ZhaoKaiQiang/KLog ...
- OpenGL FrameBufferCopy相关Api比较(glCopyPixels,glReadPixels,glCopyTexImage2D,glFramebufferTexture2D)
OpenGL FrameBufferCopy相关Api比较 glCopyPixels,glReadPixels,glCopyTexImage2D,glFramebufferTexture2D 标题所述 ...
- CSS3-03 样式 2
前言 在上一篇的博客中,阐述了 CSS 盒模型中的 Margin.Border.Padding 三个样式.但是总觉得,这些东西好像是 HTML 元素的包装样式,真正的要点是 HTML 元素(即:盒模型 ...
- 清理iOS工程里无用的图片,可瘦身ipa
工程在经过多人后,往往会出现较多的垃圾,导致打包出来的ipa文件偏大,有时候我们会通过清理代码来给程序瘦身,而瘦身ipa效果明显的,主要通过清理程序里的无用图片. 推荐一个清理图片的应用 https: ...
- Android应用开发基础之十二:版本控制
为什么需要版本控制? 场景1: 你的代码正常工作 你改了其中的几行代码 程序出了问题 你把代码改回来 程序还是不能正常工作——为什么? 场景2: 你的程序昨天还能正常运行 昨天晚上你修改了很多内容,做 ...
- SQL Server 复制快照执行错误 错误代码 14068
问题描述: 使用基于快照初始化的事务复制,在上次发布的时候,添加项,执行快照agent,报错,错误信息: Error messages:Message: The subscription status ...
- SQL Server 2008 R2——软件创建月表时同时创建一个触发器
=================================版权声明================================= 版权声明:原创文章 谢绝转载 请通过右侧公告中的“联系邮 ...