css3入门(1)：基本格式以及选择器

css的书写形式

1. 内嵌式
2. 外链式
   可以将css单独存为.css文件,然后用标签引入

<link rel="stylesheet" href="css/css.css">

优点:可以有多个css文件
3. 导入式

会过几秒才看见有样式的网页
4. 行内式
直接通过style写在标签身上

css3的基本语法

css选择器

标签选择器

• 选中所有的标签
• 通常用于标签初始化
  例如去掉列表小圆点
  
  效果：

id选择器

• id只能有一个
• 书写：#xx{}
  例子：
  效果：

class选择器

• class选择器就是类选择器
• 多个标签可以有多个内容
• 同一个标签，可以有多个class属性值
• 书写：.xxx{}
  例子：
  
  效果：

原子类

• 在做网页之前可以将各种字号字体；文字颜色等，设置为一个class选择器，用的时候直接调用即可

复合选择器

后代选择器

• .box .xx
• 注意，中间有空格
• 选择box里面的spec标签

交集选择器

• li.xx(没有空格)
• 选择既是li的也是xx类的标签

并集选择器

• ul，ol
• 选择ul，ol所有标签

伪类

：link

• 没有被访问的

：visited

• 已经被访问的

：honer

• 正被鼠标悬停的

：active

• 鼠标按下还没松开的

书写顺序

• link》visited》honer》active
• 注意，必须是这个顺序，否则会有伪类不生效

元素关系选择器

• 
• 子选择器，没有空格，而且只选儿子
• 相邻兄弟选择器，紧跟在img之后的p会被选择，而且需要同级
• 通用兄弟选择器，会选择p之后的所有同层级的选择器

序号选择器

:first-child

• 表示选择第一个子元素

:last-child

• 表示选择最后一个子元素

：nth-child()

• 里面写几就表示选择第几个子元素
• 
• nth-child(2n+1)代表选择奇数
• nth-child(2n)代表选择偶数
• 
  注意：p标签分别是为：1，2，5，6

:nth-of-type()

• 选择同种标签指定序号的子元素
• 

：nth-last-child（）

• 倒数子元素选择器

：nth-last-of-type（）

• 倒数某元素的子元素选择器

注意:first-child兼容到ie7，其他兼容到ie9

属性选择器

• 

css3新增伪类

:empty

• 选择空标签
  
  

:focus

• 选择当前获得焦点的表单元素
  用户切换输入，来影响的
  
  
  但是加上disabled就会被锁死，不能被锁定

:enabled

• 选择当前有效的表单元素
  
  

:disabled

• 选择当前无效的表单元素
  
  

:checked

• 选择当前已经勾选的单选按钮或者复选框
  
  
  勾选会变色，也可以有其他操作根据你的要求

:root

• 选择根元素，html标签
  等于 html{}

伪元素

::before

• 在所有内部元素之前添加内容，必须设置conect表示内容
• 可以用于在超链接中插入某图标
  

::after

在所有内部元素最后添加内容，必须设置conect表示内容

::selection

• 被用户选中的部分
  
  

::first-letter

• 选择某元素中第一行的第一个字（必须是块级元素）
  
  

::first-line

• 选择某元素中第一行全部文字（必须是块级元素）
  
  

选择器权重

id>class>标签

如果很复杂

• 选择器加起来看谁多
• ！important（权重最大）