<!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>
效果图：
相关推荐
三、类选择器 类选择器（.class_name）允许我们根据类属性来选择元素。例如，`.highlight {background-color: yellow;}`会将所有具有`highlight`类的元素背景色设为黄色。这对于为不同类型的元素或状态应用样式非常...
本章将深入讲解CSS选择器、ID选择器、类选择器、属性选择器以及伪类选择器等，让你熟练掌握元素的选取技巧。 ### 第三章：DOM操作 jQuery简化了DOM（文档对象模型）的操作，如获取、添加、删除元素等。我们将学习...
1. CSS3新增选择器：讲解了CSS3引入的新选择器，如属性选择器、否定伪类等。 2. CSS3新增属性：介绍了一些新的CSS属性，比如边框圆角、阴影、渐变、文字阴影等。 3. 新增变形动画属性：阐述了CSS3变形属性，包括旋转...
深入理解选择器的用法，包括元素选择器、类选择器、ID选择器，以及更高级的选择器如属性选择器和伪类选择器。学会如何根据不同的情况选择合适的选择器来精准地定位元素。 第三课：盒模型 盒模型是CSS布局的基础，...
- **第18章：使用CSS选择器（第二部分）**：继续深入探讨CSS选择器的高级用法，包括属性选择器、伪类等。 - **第19章：使用边框和背景**：详细讲解如何使用CSS3来定制边框效果和背景图案。 - **第20章：操作盒模型**...
* 伪选择器：hover{}，作用：选中鼠标悬停在元素上的状态，设置样式。 八、 背景属性 背景属性用于设置背景颜色、背景图片、背景平铺和背景位置。 * 背景颜色属性名：background-color(bgc)。 * 背景图片属性名：...
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 ...
优先级顺序是：行内样式（`style`属性）> ID选择器 > 类、属性和伪类选择器 > 标签和伪元素选择器 > 通用选择器、子选择器、相邻兄弟选择器等 > 继承的样式。此外，`!important`可以强制设置最高优先级。 **五、...
3. **伪类和伪元素**：CSS 2.0增加了更多的伪类（如`:hover`, `:active`, `:link`, `:visited`）和伪元素（如`::first-line`, `::first-letter`, `::before`, `::after`），用于定义元素在特定状态或位置的样式。...
5. **伪类和伪元素**：如`:hover`用于鼠标悬停状态，`:first-child`选择父元素的第一个子元素。 **四、盒模型** CSS 2.0中的盒模型包括内容(content)、内边距(padding)、边框(border)和外边距(margin)，这些元素...
1. **基本选择器**：包括类型选择器（如`p`）、ID选择器（如`#myid`）、类选择器（如`.myclass`）和通配符选择器（如`*`）。 2. **组合选择器**：允许将多个选择器组合在一起，如后代选择器（`div p`）和并集选择器...
3. **伪类和伪元素**：如`:hover`用于鼠标悬停状态，`:first-child`选择父元素的第一个子元素，`:before`和`:after`用于在元素内容前或后插入内容。 4. **通配符选择器**：`*`用于选择所有元素。 5. **属性选择器**...
CSS3引入了许多新的选择器，如类选择器（.class）、ID选择器（#id）、伪类（:hover, :active, :focus）和伪元素（::before, ::after）。此外，还有属性选择器，例如[attribute=value]，以及更强大的兄弟选择器（~）...
2. 选择器类型：学习ID选择器、类选择器、元素选择器以及更高级的选择器如伪类和伪元素。 3. 样式声明：理解如何编写CSS规则，包括属性和值的组合，以及注释的使用。 第二天：CSS盒模型 1. 盒模型介绍：了解内容...
· 第三章:XML的术语 · 导言 · 一.XML文档的有关术语 · 二.DTD的有关术语 · 第四章:XML的语法 · 一.XML语法规则 · 二.元素的语法 · 三.注释的语法 · 四.CDATA的语法 · 五.Namespaces的语法 · 六.entity的...
CSS3.0引入了更强大的选择器，如类选择器（.class）、ID选择器（#id）、伪类（:hover、:active、:focus等）和伪元素（::before、::after）。此外，还有基于属性的选择器，例如`[attr=value]`，以及兄弟选择器（~）和...
1. **伪类和伪元素**：CSS3增加了许多新的伪类，例如`:hover`、`:active`、`:focus`用于交互状态，`:nth-child()`、`:nth-last-child()`用于选择特定位置的子元素，`:not()`用于排除选择等。同时，伪元素如`::before...
4. **伪类和伪元素**：如`:hover`（鼠标悬停）、`:first-child`（第一个子元素）等，用于描述元素的不同状态或部分。 **四、CSS盒模型** 盒模型是理解CSS布局的关键，包括content（内容）、padding（内边距）、...
4. **伪类和伪元素**：如 `:hover` 用于鼠标悬停状态，`:first-child` 选择父元素的第一个子元素。 5. **组合选择器**：可以结合使用，如 `h1+p` 选择紧跟在`h1`后面的`p`元素。 **四、属性与值** 1. **颜色**：...