问题一：CSS有几种引入方式? link 和@import 有什么区别?
css一共有4种引入方式：
- 内联样式
<h1 style="color: red; font-size: 20px;"></h1> - 内部样式
<style type="text/css">h1
{width:100px;
height:100px;
border:1px solid #000;}
</style>
<h1>标题</h1> - 外部样式
<head> <link rel="stylesheet" type="text/css" href="xxx.css"> </head> - @import方式引用外部样式表
<style> @import url("hello.css"); @import "world.css"; </style>
link 和@import 有什么区别?
差别1：老祖宗的差别。link属于XHTML标签，而@import完全是CSS提供的一种方式。
link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。
差别2：加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显（梦之都加载CSS 的方式就是使用@import，我一边下载一边浏览梦之都网页时，就会出现上述问题）。
差别3：兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
问题二列出你所知道的选择器
基础选择器：
*：通用元素选择器，匹配页面内所有元素
#id：id选择器，匹配特定id的元素
.class：类选择器，匹配class包含的（不等于）特定类的元素
element：标签选择器
组合选择器
E,F：多元素选择器，用,分隔，同时匹配元素E或元素F。
E F：后代选择器，用空格分隔，匹配E元素所有的后代（不只是子元素、子元素向下递归）元素F
E>F：子元素选择器，用>分隔，匹配E元素的所有直接子元素
E+F：直接相邻选择器，匹配E元素之后的相邻的同级元素F
E~F：普通相邻选择器（弟弟选择器），匹配E元素之后的同级元素F（无论直接相邻与否）
.class1.class2：id和class选择器和选择器连写的时候中间没有分隔符，.和 #本身充当分隔符的元素
element#id：id和class选择器和选择器连写的时候中间没有分隔符，.和 #本身充当分隔符的元素
属性选择器
E[attr]：匹配所有具有属性attr的元素，div[id]就能取到所有有id属性的div
E[attr = value]：匹配属性attr值为value的元素
伪类选择器
E:first-child：匹配元素E的第一个子元素
E:link：匹配所有未被点击的链接
E:visited：匹配所有已被点击的链接
E:active：匹配鼠标已经其上按下、还没有释放的E元素
E:hover：匹配鼠标悬停其上的E元素
E:focus：匹配获得当前焦点的E元素
E:lang(c)：匹配lang属性等于c的E元素
E:enabled：匹配表单中可用的元素
E:disabled：匹配表单中禁用的元素
E:checked：匹配表单中被选中的radio或checkbox元素
E::selection：匹配用户当前选中的元素
E:root：匹配文档的根元素，对于HTML文档，就是HTML元素
E:nth-child(n)：匹配其父元素的第n个子元素，第一个编号为1
E:nth-last-child(n)：匹配其父元素的倒数第n个子元素，第一个编号为1
E:nth-of-type(n)：与:nth-child()作用类似，但是仅匹配使用同种标签的元素
E:nth-last-of-type(n)：与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素
E:last-child：匹配父元素的最后一个子元素，等同于:nth-last-child(1)
E:first-of-type：匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)
E:last-of-type：匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)
E:only-child：匹配父元素下仅有的一个子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
E:only-of-type：匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
E:empty：匹配一个不包含任何子元素的元素，文本节点也被看作子元素
E:not(selector)：匹配不符合当前选择器的任何元素
E::first-line：匹配E元素内容的第一行
E::first-letter：匹配E元素内容的第一个字母
E::before：在E元素之前插入生成的内容
E::after：在E元素之后插入生成的内容
问题三：a:link, a:hover, a:active, a:visited 的顺序是怎样的？ 为什么？
a:link, a:hover, a:active, a:visited 的顺序是a:link； a:visited；a:hover, a:active
原理是：当选择器的优先级相等时，写在后面的会覆盖前面的。
当鼠标经过链接时，同时拥有a link和a hover俩个属性，遵从原理，a hover将覆盖alink；当鼠标经过已访问的链接时，a hover属性将覆盖a visited定义；当鼠标已经按下链接，则a visited将覆盖所有属性。
计算选择器的优先级：
1.先设定初始值：0,0,0,0,0
2.加了！improtant，在第一位加1：1,0,0,0,0
3.内联样式在第二位加1：0,1,0,0,0
4.id选择器为第三位加1：0,0,1,0,0
5.类选择器在第四位加1：0,0,0,1,0
6.伪类和属性选择器与类选择器一样：0,0,0,1,0
7.标签选择器在第五位加1:0,0,0,0,1
!important是将对应选择器的优先级设置为最高级，覆盖所有属性。计算优先级时通过数标签来计算，先数id，如果id相等再数类，如果id不相等，id多的选择器权重高，权重越高，优先级越高。如果id选择器数量相同，再数类选择器，最后数标签。依次类推
网友评论