CSS第一小节第三天

CSS伪类

状态是动态变化的，当一个元素达到一个特定状态时，它可能得到一个样式，当状态改变时，又失去这个样式。

它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类

:link

伪类将应用于未被访问过的链接。IE6不兼容，解决此问题，直接使用a标签。

:hover

伪类将应用于有鼠标指针悬停于其上的元素。在IE6只能应用于a连接，IE7+所有元素都兼容。

:active

伪类将应用于被激活的元素，如被点击的链接、被按下的按钮等。

:visited

伪类将应用于已经被访问过的链接

:focus

伪类将应用于拥有键盘输入焦点的元素。

顺序问题：LoVe  HAte原则。

注意:顺序一定是Link-Visited-Hover-Active

CSS伪元素

伪元素 是控制内容

:first-line 伪元素

:first-letter 伪元素

注释：以上两个伪元素只能用于块级元素

:first-child 伪元素，选择属于第一个子元素的元素。

伪类是状态,伪元素是内容

例如：span:first-child{}  /*选择属于第一个子元素的所有span标签。*/

:before与:after伪元素，是行内元素.可以设置元素之前后之后的 内容，并且配合content设置相关内容。比如：  #demo:after,#demo:before {  content:"--";display:block; }

注意：content属性只能跟 伪元素:before 和:after共用。

Display:block. 是设置标签为块级元素，独占行。

---

CSS的层叠性和继承性

CSS的层叠性，所谓层叠性是指多种CSS样式的叠加,也就是说后来设置的样式会层叠（覆盖）之前的样式，层叠性的前提示CSS的选择器的优先级相同。

CSS的继承性

CSS的继承性是指，子容器的样式会继承父容器的样式。但并不是所有的样式都能继承。

只有部分样式能继承，比如：文字相关字体大小、颜色、字体样式、行高、鼠标样式等。

恰当地使用继承可以简化代码，降低CSS样式的复杂性。但是，如果在网页中所有的元素都大量继承样式，那么判断样式的来源就会很困难，所以对于字体、文本属性等网页中通用的样式可以使用继承。例如，字体、字号、颜色、行距等可以在body元素中统一设置，然后通过继承影响文档中所有文本。

并不是所有的CSS属性都可以继承，例如，下面的属性就不具有继承性：边框、外边距、内边距、背景、定位、元素宽高属性。

盒子相关的样式都不能继承，比如：宽高、背景色、边距、浮动、绝对定位等。

所有盒子相关的属性都不能继承

CSS的特殊性（优先级）

CSS的特殊性，定义CSS样式时，经常出现两个或更多规则应用在同一元素上，那么谁的优先级更高呢，这就是CSS的特殊性

比较CSS的优先级的时候：

1、首先比较行内样式，行内样式优先级最高。如果嵌入样式和行内样式同时设置样式时，行内样式优先级最高。

2、其次是内嵌样式的优先级比较：

内嵌样式的，ID选择器对应的样式优先级最高。

其次是Class样式

再次是标签选择器样式，

再次是通配符选择器设置的样式

后面是 继承的样式，

最后是浏览器默认的样式。

---

CSS的案例得知：

结论一：继承的样式要大于默认的样式，

结论2： 通配符选择器的样式的优先级比继承样式的优先级要高。

结论3：标签的选择器的优先级要高于通配符选择器的优先级。

结论4：类选择器的样式的优先级要高于 标签选择器的样式的优先级。

结论5：id选择器的优先级高于 类选择器的优先级

结论6： 行内样式的选择器的优先级高于  id选择器的优先级。

复合选择器的样式优先级核算：

复合选择器 的优先级根据四个层次来算，首先是行内最高。

其次，比较所有的id选择器的个数，个数多的为高。

再次比较类选择器的个数，个数多的为高，

最后比较标签选择器的个数，个数多的为高。