点击上面的链接，:target 选择器会突出显示当前活动的 HTML 锚。
20 21内容 1 ...
22内容 2 ...
23 24注意：IE9+ 以及所有浏览器都支持该选择器，IE8 以及更早版本的浏览器不支持。
在 Chrome 中显示如下：
20、:hover 【CSS1】伪类选择器。
:hover 用于当鼠标移入链接时添加的特殊样式。
:hover 选择器可用于所有元素，不仅是链接，主要用于定义鼠标滑过效果。
1 div:hover{2 background-color:pink;3 }4 a:hover{5 border-bottom: 1px solid red;6 } 上面的代码，当鼠标移入所有 div 元素时显示粉色背景色，当鼠标移入所有链接时显示 1 像素的底边框。
21、:before 和 :after 【CSS2】伪元素选择器，在网上有很多创造性用法，主要用于在指定元素周围生成一些内容。
:before 和 :after 这俩小伙伴，用于在指定元素之前和之后插入内容，使用 content 属性来指定要插入的内容，具体应用可以点这里。
(1)、:before
配合 CSS 的 content 属性在指定元素之前插入内容。
1 p:before{2 content:"看这里 - ";3 color:red;4 font-weight:bold;5 } 上面的代码，在所有段落之前插入 “看这里 - ”并显示为红色的粗体字。
(2)、:after
配合 CSS 的 content 属性在指定元素之后插入内容。
该伪元素有一个比较神奇的创造性用法，那就是 clearfix:after，即清除浮动。
在 CSS 中，浮动会使元素向左或向右移动，直到他的外边缘碰到包含框或另一个浮动框的边框为止，其周围的元素也会重新排列。浮动元素之后的元素将围绕它，由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。简单理解就是，浮动元素脱离了文档流，包围图片和文本的 div 不占据空间。如下：
1 2 3 4 5 浮动问题 6 7 *{ 8 margin:0; 9 padding:0;10 }11 #box{12 border:2px solid red;13 width:800px;14 }15 .float{16 width:200px;17 height:200px;18 float:left;19 background:#9C9C9C;20 margin-right:10px;21 }22 23 24 25 26
27
查看更多关于这30类CSS选择器，你必须理解！_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did111314