VIP10-11月29日作业：CSS
2016-11-30 本文已影响0人
饥人谷_Shirley
问题一：CSS有几种引入方式? link 和@import 有什么区别?
- CSS引入方式
1.外部样表式：如下
<link rel="stylesheet" type="text/css" href="xxx.css">
2.内部样式表【使用<style>标签】：如下
<head>
<style type="text/css">
div{ color: red; font-size:12px; }
</style>
</head>
注：<style></style>内部样式表写在html的<head>内，只对所在网页有效
3.内联样式：如下
<div style="color:red; font-size:12px;">123</div>
<p style="color:red">段落</p>
4.@import方式引用外部样式表。如下：
<head>
<style type="text/css">
@import url(xxx.css);
</style>
</head>
PS： 注意一定要写分号
- link和@import有什么区别
不同点：
1.来源和作用的不同：<link>标签属于HTML标签，只能放在HTML文档的代码中使用，除了可以加载CSS外，还可以用于其他方面，比如：定义rel 连接属性。@import属于css提供的方法，只能用于加载css，@import既可以在HTML文档的代码中使用，也可以在css文件中使用。
2.加载顺序的不同：link引用css时，在页面载入时同时加载；@import需要页面完全载入后加载。
3.兼容性的不同：link是xhtml标签，无兼容问题；@import是在低于IE5版本浏览器中不支持。
4.使用DOM控制样式时的不同：link支持使用javascript控制dom去改变样式；而@import不支持。
问题二：列出你所知道的选择器
- 选择器类型：
1、基础选择器
| 选择器 | 含义 |
|---|---|
| * | 通用元素选择器，匹配页面任何元素（这也就决定了我们很少使用） |
| #id | id选择器，匹配特定id的元素 |
| .class | 类选择器，匹配class包含(不是等于)特定类的元素 |
| element | 标签选择器 |
例如：
*{
padding: 0;
}
2、组合选择器
| 选择器 | 含义 |
|---|---|
| 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选择器和选择器连写的时候中间没有分隔符，.和 #本身充当分隔符的元素 |
例如：
div>p{
font-size: 20px;
}
3、属性选择器
| 选择器 | 含义 |
|---|---|
| E[attr] | 匹配所有具有属性为attr的元素（div[id]能选择所有具有id属性的div） |
| E[attr=value] | 匹配所有属性为value的元素（div[type=text]匹配id=text的div） |
| E[attr~=value] | 匹配所有属性attr具有多个空格分隔，其中一个值等于value的元素 |
| E[attr ^=value] | 匹配属性attr的值以value开头的元素 |
| E[attr $=value] | 匹配属性attr的值以value结尾的元素 |
| E[attr *=value] | 匹配属性attr的值包含value的元素 |
例如：
p[color="red"]{
line-height:20px;
}
4、伪类选择器
| 选择器 | 含义 |
|---|---|
| E:first-child | 匹配元素E的第一个子元素 |
| E:last-child | 匹配元素e的最后一个子元素 |
| E:nth-child(n) | 匹配其父元素的第n个子元素，第一个编号为1 |
| E:first-of-type | 匹配父元素下使用同种标签的第一个子元素，等同于nth-of-type(1) |
| E:hover | 匹配鼠标悬停智商的e元素 |
| E:focus | 匹配获得焦点的e元素 |
例如：
a:hover{
color:red;
}
5、伪元素选择器
| 选择器 | 含义 |
|---|---|
| E::first-line | 匹配E元素的第一行 |
| E::first-letter | 匹配E元素的第一个字母 |
| E::before | 在e元素之前插入生成的内容 |
| E::after | 在e元素之后插入生成的内容 |
例如：
.clearfix::after{
content: ''; clear: both;display: block;
}
问题三：a:link, a:hover, a:active, a:visited 的顺序是怎样的？ 为什么？
- :link, a:hover, a:active, a:visited 的顺序是：
a:link
a:visited
a:hover
a:active - 原因是：
当选择器的优先级相等时，写在后面的会覆盖前面的，a:link, a:hover, a:active, a:visited这四个选择器的优先级都一样
当<a>标签指向的链接没有访问过时，它处于link状态，所以会用到a:link选择器指定的样式
当<a>标签指向的链接被访问过时，它同时处于link和visited状态，而a:link和a:visited的优先级相同，后面的会覆盖前面的，所以用哪个样式由它们的顺序决定。
将a:visited写在a:link后，让访问过的链接使用a:visited指定的样式，同理，当用户的鼠标悬停在<a>标签指向的链接上时，它同时处于link，visited， hover状态。
将a:hover写在 a:link和a:visited之后，让这个链接使用 a:hover指定的样式
当用户鼠标点击<a>标签指向的链接时(鼠标按住没有松开的状态)，这个时候链接同时处于link, visited，hover，active四种状态，要让链接用到a:active指定的样式，就要将a:active写在最后。
问题四：选择器优先级是如何计算的?
由高到低排列：
- 属性后+!important
- 内联样式：
<p style=“color: red;”> - id选择器： #id
- 类选择器： .class
- 伪类选择器：a:link
- 属性选择器：h1{}
- 标签选择器：p[XXX]
- 通用选择器：*
- 浏览器自定义
- !important是将对应选择器的优先级设置为最高级，但!important的属性是不能继承的！计算优先级时通过数标签来计算，先数id，如果id相等再数类，如果id不相等，id多的选择器权重高，权重越高，优先级越高。如果id选择器数量相同，再数类选择器，最后数标签。
****文章著作权归饥人谷_Shirley和饥人谷所有，转载须说明来源****
