HTML5--link、selector、!important

8月10日

<link rel="shortcut icon" href="图片位置" type="">：显示浏览器标签上的图标

图片为

.ico，type="image/vnd.microsoft.icon"

.gif，type="image/gif"

.png，type="imgae/png"

在测试中ico/gif/png可以在chrome显示，而IE9只能显示ico，IE11能显示三种。

在rel中，可以写rel=“icon”，icon和shortcut icon的区别：

为了保证发ficonde出现，shortcut icon字符串会被大多数遵循标准的浏览器识别为icon（而shortcut挥别忽略），写这个是为了让IE也能识别，因为IE会将shortcut icon作为一个单独的名称。（so只是为了IE）

例子：

<link rel="shortcut icon" href=".icon" type="image/vnd.microsoft.icon">

<link rel="shortcut icon" href=".gif" type="image/gif">(这一行作为备用的显示）

在浏览器中会优先显示icon的图片。\

!important的应用：

默认情况下,CSS规则按级层覆盖，例如在.CSS文件中的定义可以被html文件中<style type="text/css"></style>里的定义覆盖，反之不行；书写在下面的定义可以覆盖写在上面的定义，反之不行。然而,对覆盖平衡而言,加上一个“!important”就优先于正常的CSS规则。

ie7~ie11,Firefox，chrome高端浏览器可以识别！important属性，但ie6不能识别。

例子：

a{

border:20px solid #fff !important;

border:20px solid #000;

}

在该样式中，浏览器优先执行!important这一条。显示为#fff。但在IE6中不能显示。只有重写才可以

例子：

a{

20px solid #fff !important

}

a{20px solid #000 

}这样IE6才会显示第一条。

css选择器

种类：7种

html选择器：html标签。类选择器：.class。  id选择器：#id。关联选择器：html.class 或者是html#id

组合选择器：html，.class，#id（在组合选择器中，必须用号隔开）

伪选择器：a.hover{}只有a和p标签才有伪选择器。

选择器之间的优先级别：

html#id>html.class>html html

伪元素的介绍：

a.link{}未访问链接

a.visited{}已访问链接

a.hover{}鼠标移动到链接上

a.active{}选定的链接

注意的问题：a:hover必须放在a:link和a:visited之后才有效；a:active必须放在a:hover之后才有效。

P标签的伪元素

1、:first-letter:选择p元素的首字母并设置样式。2、:first-line:选择p的首行并设置样式

3、:before:在每个p元素之间插入内容。           4、:after:在每个p元素之后插入内容

暂时写这几个。。。