伪类选择器、清除浮动

2018.7.22

1.伪类选择器(昨天查的a:hover就是锚伪类)

CSS 伪类用于向某些选择器添加特殊的效果。(折角、抬头、箭头)

锚伪类就是在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：已被访问状态，未被访问状态，鼠标悬停状态、活动状态(选定)。

a:link{color: #FF0000}/* 未访问的链接 */

a:visited{color: #00FF00}/* 已访问的链接 */

a:hover{color: #FF00FF}/* 鼠标移动到链接上 */(hover可用于所有元素，不只是链接)

a:active{color: #0000FF}/* 选定的链接 */

注:在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的;a:active 必须被置于 a:hover 之后，才是有效的。链接可以设置字体颜色，字体大小，字体类型，背景颜色等等。

2.about":first-child"(另一个伪类选择器)

①选择

列表中的第一个元素并设置其样式：

li:first-child{background:yellow;}

注：和②的区别是，无论是

,还是
，第一个元素样式都是一样

②设置每个

的首个子元素，并设置其样式：

ul>:first-child{background:yellow;}

注：只有

中第一个元素改变

③没太理解(如下图)







按理说应该只有第一个strong变成黄色，但是两个都是

3.about":first-child"和":first-of-type"

:first-child 匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。

:first-of-type 匹配的是某父元素下相同类型子元素中的第一个，比如 p:first-of-type，就是指所有类型为p的子元素中的第一个。这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了。

4.清除浮动

一.加一个空元素，

,然后在css里面写语句clear{clear:both;}就可以可清除浮动。(之前7.20写过)

二.在css样式中添加语句overflow:hidden;或overflow:auto;可以清除浮动，例如为父元素设置容器宽高或设置 *zoom:1。(浮动元素又回到了容器层，把容器高度撑起)等方法

为什么要清除浮动，在非IE浏览器下，当容器的高度为auto，且容器的内容中有浮动的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理。