伪类选择器、清除浮动

Posted 2023-04-06

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

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

a:linkcolor: #FF0000/* 未访问的链接 */

a:visitedcolor: #00FF00/* 已访问的链接 */

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

a:activecolor: #0000FF/* 选定的链接 */

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

①选择<li>列表中的第一个元素并设置其样式：

li:first-childbackground:yellow;

注：和②的区别是，无论是<ul>,还是<ol>，第一个元素样式都是一样

②设置每个<ul>的首个子元素，并设置其样式：

ul>:first-childbackground:yellow;

注：只有<ul>中第一个元素改变

③没太理解(如下图)

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

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

一.加一个空元素，<div class="clear"></div>,然后在css里面写语句clearclear:both;就可以可清除浮动。(之前7.20写过)

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

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

使用 after 伪类清除浮动

以前清除浮动的时候总是在想要清除浮动的元素后面添加

1 <div style="clear:both;"></div>

或者写在br标签里面来解决，但这样会增加无语义的标签，下面是用after伪类实现，兼容多种浏览器

1 .clearfix:after{
2     content:"";
3     display:block;
4     height:0;
5     clear:both;
6     visibility:hidden;
7 }

为兼容IE6,IE7，因为ie6,ie7不能用after伪类。加上下面代码

1 .clearfix{zoom:1}

一般情况下，如果父层内部有浮动(float)可能导致父层的高度为0，加上clearfix后就行了

HTML：

1 <div class="parent clearfix">
2     <div class="left">left</div>
3     <div class="right">right</div>
4 </div>

CSS:

 1 .clearfix{zoom:1}    
 2 .clearfix:after{
 3     content:"";
 4     display:block;
 5     height:0;
 6     clear:both;
 7     visibility:hidden;
 8 }
 9 .parent{
10     background-color:red;
11     width:120px;
12 }
13 .left{
14     float:left;
15     background-color:pink;
16     height:60px;
17 }
18 .right{
19     float:right;
20     background-color:#abcdef;
21 }