最实用css3常用知识点梳理一:选择器+计数器
来源:互联网 发布:微信网络小胖表情包 编辑:程序博客网 时间:2024/06/05 06:38
一:css3选择器
上一篇《a元素状态伪类顺序的分析》
1.状态伪类选择器 1.1 利用正在处于的某种状态选中某个元素,语法:元素+:+状态表示 如a:visited p:hover 1.2 伪类与元素:并不是所有的元素都可以使用伪类 1.2.1 a元素特有的:link :visited :active等 这里需要注意的是在给a元素添加伪类样式时书写顺序是有要求的详细见我的上一篇文章的:《a元素状态伪类顺序的分析》**相信你会对状态伪类有一个更深的认识 1.2.2表单元素独有的:disabled :checked等2.结构化伪类选择器: 2.1 根据页面文档的结构,有规则的选中元素 2.2 nth-of-type(an+b) an+b a个一组中的第b个,an相当于an+a: 从同一层级的特定类型元素中选符合规则的元素 2.3 nth-child(an+b) 从同一层级的所有元素中选符合选择符合规则的特定类型元素3.伪元素: 3.1 伪元素用css添加的不在dom节点书中的元素,具有如下几个特点 (1)无法通过js获取其DOM (2)“寄生”于其他元素,无法通过浏览器直接查看 (3)未完成某种功能添加,其样式中必须有content属性 (4)伪元素默认是inline元素 3.2 常见的伪元素有:before :after,其中:after常用来清楚浮动产生的父元素高度塌陷
.clearbox:after{ content:""; display:block; (用display:table更有比格) clear:both; visibility:hidden:0;
(另有写法,如果content内不是空字符串,还要加上 height:0 line-height:0; ) } 3.3 content属性,这个属性可以配合其他“方法”读取一些值 比如 attr(title),读取应用这个伪元素选择器的元素的title属性 counter(num),读取奇数器num中的值 3.4 伪元素的标准语法是::关键字,但为了兼容ie低版本,一般写出:关键字
二: css计数器
用counter-increment: num(任意合法名称);声明一个计数器 这个计数器是一个样式,其该样式生效后num值就会自动加1; 可以用counter(num)读取num的值,从1开始读取,常配合伪元素选择器中的content属性使用
三:DOM原生支持的添加样式的方法
大家都知道,用js操作样式常有的就是动态操作元素DOM的class的属性但原来的js对这种操作方式并不有好,人们常常要自己封装函数,或者引入外部框架来简化操作,但现在原生有了动态操作class属性的方法了!(本文为一个句尾符号献给官方爸爸)classList:HTML5 在DOM中新增的操作 class 属性的对象,封装在每个元素DOM对象里。里面封装着add(),remove(),toggle(),contains()等方法,length等属性使用方法与jQ中对class属性的操作基本无二
说实话编者是一个原生js的死忠,痴迷并崇拜于js中在貌似松散中隐藏的巨大创造力,也习惯并享受在为实现某个功能编写一行行代码,封装一个个函数。相信你们也有类似的感受。但不可否认是,那些站在数据结构与编译原理两山顶峰,坐在数学和算法王座上的大牛们,一直都在做一件事,让编程变得更简单,让开发者能用更简洁的代码实现更大的功能。在这个方面我们jser可能本身就是最大的受益者,又有什么立场不去接受这种趋势。铁匠制造了更好用的锄头,我们这些做农民的为了提高生产力,当然是要好好学好好用。最重要的是在种地的同时也别忘了登山。前路漫漫,一眼望不到头,还有什么比这更让人兴奋的吗。
0 0
- 最实用css3常用知识点梳理一:选择器+计数器
- 最实用的常用css3知识点梳理二:过渡+2d变形+3d变形
- 最全CSS3选择器
- 最全CSS3选择器
- 最全CSS3选择器
- 最全CSS3选择器
- html5知识点:CSS3新增选择器
- css3常用的选择器
- CSS3 常用选择器
- CSS3知识点整理(二)----CSS3选择器
- CSS3知识点整理(二)----CSS3选择器
- CSS3知识点整理(二)----CSS3选择器
- CSS3选择器(一)
- CSS3选择器详解一
- CSS3的选择器(一)
- Java知识点梳理(一)
- Win32 线程知识点梳理一
- TableView知识点梳理__一
- python-zip使用
- python内存管理机制
- jadclipse decompile tool
- 产生长度为10以内整数的随机字符串(java)
- PHP magic_quotes_gpc的使用方法详解
- 最实用css3常用知识点梳理一:选择器+计数器
- Redis 有序集合
- hdu 1285确定比赛名次 (拓扑排序)
- 第七届 山东省ACM Triple Nim(找规律 待整理)
- Java设计模式学习01——单例模式
- Linux进程同步与通讯:共享内存和信号量的使用
- Java集合框架总结
- java中的继承和多态
- 如果使用ssm框架搭建应用,静态资源找不到