脚本宝典收集整理的这篇文章主要介绍了css3入门：基本格式以及选择器，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

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（权重最大）

脚本宝典总结

以上是脚本宝典为你收集整理的css3入门：基本格式以及选择器全部内容，希望文章能够帮你解决css3入门：基本格式以及选择器所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。