列表
ul
双
语义:有序列表
一般内容没有特别明确的顺序关系的时候去使用
可设置的属性
list-style-type
类型
none
disc-黑色实心圆点-默认值
circle-黑色空心圆点
square-黑色实心方块
list-style-image
url()
list-style-position
outside
设置在 padding 内-默认值
inside
设置在 content 内
复合写法
list-style
顺序
1.类型
2.位置
3.图片
清除默认样式
list-style:none;
margin:0;
padding:0;
ol
双
语义:无序列表
内容具有明确顺序的时候使用
可设置类型
不推荐使用 list-style 设置
推荐使用 属性:type 设置
1-数字-默认值
a
A
i
I
清除默认样式
list-style:none;
margin:0;
padding:0;
修改初始值
通过 ol 的属性:start 进行设置
通过li的属性 value 进行设置
选择器的扩展
标签名选择器
- div{}
类选择器
- .类名{}
ID 选择器
- # id名称{}
群组选择器
- 选择器1 , 选择器2{}
后代选择器
- 选择器1 选择器2
子代选择器
- 选择器1 > 选择器2{}
相邻兄弟选择器
- 选择器1 + 选择器2{}
同级元素通用选择器
- 选择器1 ~ 选择器2{}
属性选择器
[属性名]{}
[属性名 = 属性值]
伪选择器(pseudo-selector)
伪元素选择器
并不存在,只是 CSS 中额外提供的福利
::first-line
作用范围:文本的首行
如果想要只设置 div 标签,则需要这么书写 div::first-line{}
注意:伪元素选择器前缀是两个冒号,但是其实
浏览器认为该选择器只有一个冒号,之所以书写
两个冒号,是为了向后面的版本兼容::first-letter
作用范围:文本内容的首字母
伪类选择器
动态伪类选择器
:link
:visited
:hover
:active
正常的
:before
在内容之前添加内容
:after
在内容之后添加内容
:nth-child
选择器匹配父元素中的第n个子元素。
:nth-last-child
选择器匹配父元素中的第n个子元素。
从后向前计数
:nth-of-type
选择器匹配同类型中的第n个同级兄弟元素。
:nth-last-of-type
选择器匹配同类型中的第n个同级兄弟元素
从后向前计数
:first-child
选择其父元素的第一个子元素
:last-chid
选择其父元素最后一个子元素
CSS 3新增选择器
在 IE6/7下,不生效