CSS样式详解

引用方式

head标签中link标签引入的外部样式，常用；
<link rel="stylesheet" type="text/css" href="style.css">
head标签中style标签中来写内部样式，一般不用(不利于优化)；
<style type="text/css">...样式</style>
标签中style属性写内联样式，慎用(等级高)
<div style="width:111px;"></div>

CSS模块化

在css中引用其他css文件的方式
@import url(style.css);或者@import “style.css”

CSS选择器

标签选择器
类选择器
ID选择器

逻辑选择器

• 后代选择器： ul li

• 子选择器： ul>li

• 相邻选择器:.active+li

• 同级所有选择器.active~li

-伪类选择器

• 任意位置:nth-of-type(an+b) //an是起点，b是偏移量
  //例，匹配第三个li： ul li:nth-of-type(0n+3)

• 所有元素:nth-of-type(1n)

• 从某位置开始的后边所有元素:nth-of-type(1n+3)

• 反向选择器

• 最后的三个:nth-last-of-type(-n+3)

• 倒数第三个:nth-last-of-type(3)

& 选择索引为偶数的元素
:nth-of-type(2n)

& 选择索引为奇数的元素
:nth-of-type(2n +/- 1) //+或者-都可以

关键字

偶数
:nth-of-type(even)

奇数
:nth-of-type(odd)

第一个
:first-of-type{}

最后一个
:last-of-type{}