<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>伪类选择器以及伪元素</title>
<style>
/*:root 选择器匹配文档根元素。设置 HTML 文档的背景色：*/
:root{ background:#036;}
body{ background:#fff;}
p.aaas{ text-align:left; color:#c00;}
p.right{ text-align:right; color:#0F0;}
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 当有鼠标悬停在链接上 */
a:active {color: #0000FF} /* 被选择的链接 */
p:first-line{ color:#f60; background:#F00;}
p:first-letter{ color:#0F3; font-size:18px;}
li{ list-style:none;}
li:before{ content:"[前面]"; color:#00F;}
li:after{ content:"[后面]"; color:#6F3;}
</style>
</head>
<body>
<h1>类选择器</h1>
<p class="aaas">伪类选择器以及伪元素</p>
<p class="right">伪类选择器以及伪元素</p>
<br/>
<a href="###" target="_blank">伪类选择器</a>
<br/>
<p>
在CSS中，主要有四个伪元素选择器<br/>
first-line伪元素选择器用于向某个元素中的第一行文字使用样式。
</p>
<ul>
<li><a href="###">伪类选择器</a></li>
<li><a href="###">伪类选择器</a></li>
<li><a href="###">伪类选择器</a></li>
<li><a href="###">伪类选择器</a></li>
<li><a href="###">伪类选择器</a></li>
<li><a href="###">伪类选择器</a></li>
<li><a href="###">伪类选择器</a></li>
</ul>
</body>
</html>
效果图：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>not选择器</title>
<style>
:root{ background:#3F0;}
body *:not(h1){ background:#fff;}
:empty{ background:#f60;}
</style>
</head>
<body>
<h1>not选择器</h1>
<p>阅谁问君诵，水落清香浮。</p>
<br/>
<table border="1" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td></td>
<td>4</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td></td>
</tr>
</table>
</body>
</html>
效果图：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>选择器first-child、last-child、nth-child和nth-last-child</title>
<style>
/*
li:first-child{ background:#f60;}
li:last-child{ background:#f60;}
li:nth-child(odd){ background:#0C6;}
li:nth-child(even){ background:#0C6;}
li:nth-child(3n+1){ background:#f60;}
li:nth-child(3n+2){ background:#f60;}
li:nth-child(4n+1){ background:#f60;}
li:nth-child(4n){ background:#f60;}
*/
li:only-child{ background:#00F;}
</style>
</head>
<body>
<h1>选择器</h1>
<h1>唯一的</h1>
<ul>
<li>第一个项目</li>
</ul>
<h1>很多的</h1>
<ul>
<li>第一个项目</li>
<li>第二个项目</li>
<li>第三个项目</li>
<li>第一个项目</li>
<li>第一个项目</li>
<li>第一个项目</li>
<li>第二个项目</li>
<li>第三个项目</li>
<li>第一个项目</li>
<li>第一个项目</li>
</ul>
</body>
</html>
效果图：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/*
:target 选择器可用于选取当前活动的目标元素。
URL 带有后面跟有锚名称 #，指向文档内某个具体的元素。
这个被链接的元素就是目标元素(target element)。
*/
:target{ background:#000; color:#fff;}
</style>
</head>
<body>
<a href="#A">A</a>
<a href="#B">B</a>
<a href="#C">C</a>
<a href="#D">D</a>
<div id="A">
<h2>标题</h2>
<p>内容.........</p>
</div>
<div id="B">
<h2>标题</h2>
<p>内容.........</p>
</div>
<div id="C">
<h2>标题</h2>
<p>内容.........</p>
</div>
<div id="D">
<h2>标题</h2>
<p>内容.........</p>
</div>
</body>
</html>
效果图：
相关推荐
2.6 伪元素 39 2.7 样式类 41 2.7.1 ID类 41 2.7.2 伪类 42 2.7.3 类继承 44 2.8 样式表的层叠性 47 2.9 注释 49 2.10 CSS的属性和值 49 2.10.1 字体属性 49 2.10.2 文本属性 56 2.10.3 颜色和背景属性 61 2.10.4 ...
72 2.13 练习题 73 第3章 层叠样式表 75 3.1 简介 75 3.2 样式表的层次 76 3.3 样式说明格式 77 3.4 选择器格式 78 3.4.1 简单的选择器格式 78 3.4.2 类选择器 79 3.4.3 通用选择器 79 3.4.4 id选择器 80 3.4.5 通配...
· 第三章:XML的术语 · 导言 · 一.XML文档的有关术语 · 二.DTD的有关术语 · 第四章:XML的语法 · 一.XML语法规则 · 二.元素的语法 · 三.注释的语法 · 四.CDATA的语法 · 五.Namespaces的语法 · 六.entity的...
第三部分 样式语言 325 第12章 级联样式单级别1 325 12.1 什么是CSS？ 325 12.2 样式单与文档的链接 327 12.3 选择元素 331 12.3.1 成组选择符 331 12.3.2 伪元素 331 12.3.3 伪类(pseudo-classe) 332 12.3.4 由ID来...
第三部分 样式语言... 325 第12章 级联样式单级别1. 325 12.1 什么是CSS？... 325 12.2 样式单与文档的链接... 327 12.3 选择元素... 331 12.3.1 成组选择符... 331 12.3.2 伪元素... 331 12.3.3 伪类(pseudo...
第三部分 样式语言... 325 第12章 级联样式单级别1. 325 12.1 什么是CSS？... 325 12.2 样式单与文档的链接... 327 12.3 选择元素... 331 12.3.1 成组选择符... 331 12.3.2 伪元素... 331 12.3.3 伪类(pseudo...
第三部分 样式语言... 325 第12章 级联样式单级别1. 325 12.1 什么是CSS？... 325 12.2 样式单与文档的链接... 327 12.3 选择元素... 331 12.3.1 成组选择符... 331 12.3.2 伪元素... 331 12.3.3 伪类(pseudo...
第6章 选择器与dom操作 / 215 6.1 ext js的选择器：ext.domquery / 215 6.1.1 选择器的作用 / 215 6.1.2 使用ext.query选择页面元素 / 215 6.1.3 基本选择符 / 223 6.1.4 属性选择符 / 229 6.1.5 css属性值...
第三部分 数据结构 引言 第10章 基本数据结构 10．1 栈和队列 10．2 链表 10．3 指针和对象的实现 10．4 有根树的表示 第11章 散列表 11．1 直接寻址表 11．2 散列表 11．3 散列函数 11．3．1 除法散列法...
第三部分 数据结构 引言 第10章 基本数据结构 10．1 栈和队列 10．2 链表 10．3 指针和对象的实现 10．4 有根树的表示 第11章 散列表 11．1 直接寻址表 11．2 散列表 11．3 散列函数 11．3．1 除法散列法...
第2章（\代码\第02章） • sample01.htm 将JavaScript代码插入在标签与标签之间 • sample02.htm 将JavaScript代码放在了标签与标签之间 • sample03.htm JavaScript与HTML混合执行 • ...
第三章 MATLAB 图形对象 3.1 图形对象 3.1.1 Root 对象 3.1.2 Figure 对象 3.1.3 Uicontrol 对象 3.1.4 Uimenu 对象 3.1.5 Axes 对象 3.1.6 Image 对象 3.1.7 Line 对象 3.1.8 Patch 对象 3.1.9 Rectangle...
第三章 MATLAB 图形对象 3.1 图形对象 3.1.1 Root 对象 3.1.2 Figure 对象 3.1.3 Uicontrol 对象 3.1.4 Uimenu 对象 3.1.5 Axes 对象 3.1.6 Image 对象 3.1.7 Line 对象 3.1.8 Patch 对象 3.1.9 Rectangle...
第三章 MATLAB 图形对象 3.1 图形对象 3.1.1 Root 对象 3.1.2 Figure 对象 3.1.3 Uicontrol 对象 3.1.4 Uimenu 对象 3.1.5 Axes 对象 3.1.6 Image 对象 3.1.7 Line 对象 3.1.8 Patch 对象 3.1.9 Rectangle...
第三章 MATLAB 图形对象 3.1 图形对象 3.1.1 Root 对象 3.1.2 Figure 对象 3.1.3 Uicontrol 对象 3.1.4 Uimenu 对象 3.1.5 Axes 对象 3.1.6 Image 对象 3.1.7 Line 对象 3.1.8 Patch 对象 3.1.9 Rectangle...
第三章 MATLAB 图形对象 3.1 图形对象 3.1.1 Root 对象 3.1.2 Figure 对象 3.1.3 Uicontrol 对象 3.1.4 Uimenu 对象 3.1.5 Axes 对象 3.1.6 Image 对象 3.1.7 Line 对象 3.1.8 Patch 对象 3.1.9...
324 第三部分 样式语言... 325 第12章 级联样式单级别1. 325 12.1 什么是CSS？... 325 12.2 样式单与文档的链接... 327 12.3 选择元素... 331 12.3.1 成组选择符... 331 12.3.2 伪元素... 331...
1.4.34 Random类——伪随机数生成器 75 1.4.35 Regex类——正则表达式 76 1.4.36 Split方法——分割字符串 78 1.4.37 String类——字符串 79 1.4.38 StringBuilder类——可变字符串 82 1.4.39 Substring方法——截取...