CSS基础知识总结--《CSS权威指南》阅读笔记（一）

      我在阅读这本书的时候，不算是一个CSS新手了，阅读这本书是为了再巩固一下基础，查漏补缺。下面将一些容易被疏忽的知识点罗列出来。

一、link与@import异同点

      相同点：两者都可以引用外部样式文件。

      不同点：link标签一定要写在head标签里面，@import指令一定要出现在样式文件或者用style标签包含的样式表中的最前面。另外，link标签可以通过设置属性rel值为alternate stylesheet使之成为候选样式表。但@import指令无法指定候选样式表，其中的样式文件一定会加载。

二、向后可访问性

      较老的浏览器可能不识别，就会忽略掉。但标记里面的样式表声明不会忽略，所以会以文本的形式出现在页面最上面，为了解决这个问题，建议将声明包含在一个注释标记中。如

 三、CSS相邻元素选择器

     比如：

h1+p{margin-top:50px;}

     这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。也就是说，他只对p起作用，对h1不起作用。

    再比如

h1+p+p{margin-top:50px;}

    它选择的是与h1相邻的p再相邻的p，只对最后一个起作用。

四、CSS部分属性选择器

1. 属性值是词列表的(词之间用空格分隔)，根据其中的任何一个词进行选择，符号~=，例如 [title~="hello"]。
2. 特定属性，举例[lang|="en"]，匹配lang属性为en或者以en-开头的
3. 子串匹配属性选择器。如[foo^="bar"] 以bar开头；[foo$="bar"]以bar结尾；[foo*="bar"]包含子串bar。

五、CSS伪类选择器

       什么是伪类？以锚元素(a)为例，链接有已访问的和未访问的之分，如何区别呢？唯一的办法就是将文档中的链接与用户的浏览历史记录相比较。所以有两种基本的锚类型：已访问的和未访问的，这些类型成为伪类。

1. 链接伪类 :link，:visited。它们是静态的，第一次显示之后，它们一般不会再改变文档的样式。
2. 动态伪类 :focus,:hover,:active。
3. 伪类的顺序：link-visited-focus-hover-active，将在下一章结构与层叠中解释为什么顺序很重要。
4. 动态伪类可以用于任何元素
5. 一种不合规范的设计：

   a:link,a:visited{font-size:13px;}
   a:hover{font-size:20px;}

   
   鼠标指针停在锚上时增加锚的大小，这样必须重绘文档，重新显示该链接之后的所有内容。而CSS规范指出，文档第一次显示之后，用户代理不必重绘文档，所以不能完全依赖预想的结果。一种解决办法就是将链接设为块状元素并设置宽高，这样链接就会占据固定的空间大小，不会影响后面的文档显示。
6. 不要写这样的CSS：

   a{color:red;}

   你的本意是想改变所有链接的颜色，但实际上a还包括命名锚(页内书签)，所以这种情况下使用伪类。
7. 对静态伪类:first-child的误解：举例

   p:first-child{font-weight:bold;}

   解释：将某元素的第一个子元素，如果是p的话，就将其设置为粗体。很容易误解为将所有p元素的第一个子元素设置为粗体，其实记住伪类是将某种幻想类与相关的元素关联，作用于具体指明的某类元素。上面这个例子就是作用于p元素，而不是某种未知的元素——p元素的第一个子元素。
8. 根据语言选择 :lang()。该伪类与属性选择器|=类似，区别在于语言信息不一定是通过lang属性指定，可以从很多来源得到，一般情况下使用伪类较多。

六、CSS伪元素选择器

       :first-letter  设置首字母样式

       :first-line 设置块级元素的第一行文本的样式，无论显示区域多大都是如此

       :first-letter和:first-line支持的CSS属性有限。另外所有伪元素必须出现在该伪元素的选择器的最后面

       :before和:last分别设置之前和之后元素的样式，可以插入内容