本来主是说,表格和列表用的非常少,就没打算学习.但是最近两个营销型的静态网站,都有使用到1,2,3,4,5,6这样的方式来标注步骤.又都是响应式的页面.这感觉在WAP端通过这个属性来自动实现计数,要比写HTML标签优雅的多呀.所以又回来学习一下.结果发现了新大陆,居然content也是放在这个章节讲的,现在算是content的原理搞懂了
- 现在可以自定义计数的模式和格式
- 还能把计数器关联到任何元素上
15.1 列表
15.1.1 列表的类型 list-style-type
- 只能应用到display属性值为
list-item的元素上 - list-style-none禁止显示标记,继续记数
- 注意嵌套的样式,浏览器一般都单独设置了默认值,需要自行覆盖
没想到会有这么多值,且兼容性还非常好,以前一直以为只有点点儿和数字来着.
15.1.2 列表项目的图像list-style-image
- 可以继承的属性
- 最好同时提供image和type(就像图片最好提供一个加载失败时图片以及背景)
- 标记的样式和尺寸无法掌控,只能随字号变化
15.1.3 列表标记的位置 list-style-position
- inset 就像放在前面的内联元素一样
- outset 浏览器会自动有一个ml/pd
- 不过看了一下chrome用的是最新的margin-block-start属性
15.1.4 简写属性list-style
这个简写属性没什么好特殊说明的,和边框一样,不关心顺序位置
15.2 生成的内容
生成的内容目前只能通过::after和::before插入文档.
15.2.1 插入生成的内容
- content会被插入到元素内容之前或之后
- 生成的内容位于元素框的内部
- 会继承依附元素的属性
关于content这一节,还是要看看CSS规范才行,书上讲的不够细致,且和测试结果不一致
15.2.2 指定内容
- 可以指定图片哦!!!!!!
- 里面的换行用
\A代替,测试后发现不生效 - 可以使用
attr()插入值, 兼容性还是比较好的 - 可以进行字符串拼接,中间用逗号隔开
content: '这是类名: ` attr(class) '.`;
- 使用
quotes配合content生成引号(听所未听啊,见所未见啊,关键是兼容性还比较好,但感觉没啥实际用)- 第一个字符串定义开始引号
- 第2个字符串定义结束字符
- 可以定义多套引号,以便深层次使用
- 必须先写开始引号,否则不会显示
- 一旦引用开始,只有遇到结束标记才会结束引用,减少层级
- 开始后,如果再添加一个开始标记,就会增加一个层级
.parent {
quotes: '开始引号' '结束引号' '第2个引号开始' '第2个引号结束' '"' '"'; // 嵌套3层的引号
}
.children:before {
content: open-quote;
}
.children:after {
content: close-quote;
}
15.2.3 计数器
- 声明
counter-reset- 书上说的是重置,我觉得声明合理一些
- 第一个是计数器名字
- 第2个是计数器起始值,可以为负,默认为1
- 只能在父元素上声明,不能在伪元素上声明
- 增量
counter-increment- 默认为1
- 也可以在伪元素上设置
- 调用
counter- 只能放到伪元素的content里面
- 使用了一个没有声明的计数器默认为0
- display:none不递计数器
- visibility: hidden还会递增计数
- 作用域
counters - 即在多层嵌套时使用会自动为深层次的嵌套使用新的变量
- counters(ranwawa ' - ')
ul {
counter-reset: ranwawa -1 qingwa 6;
}
ul > li {
counter-increment: ranwawa 1 qingwa 2;
}
li:first-child::before {
content: counter(ranwawa);
}
li:nth-child(2)::before {
content: counter(ranwawa);
}
li:nth-child(3)::before {
display: none;
}
li:nth-child(4)::before {
visibility: hiden;
}
li:nth-child(5)::before {
content: counter(ranwawa);
}
li:last-child::before {
content: counter(qingwa);
}
15.3 定义计数模式
只有firefox支持,就没必须做笔记了
