列表，选择器的扩展简述

列表

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下，不生效