CSS基础(part3)--伪类及伪元素
程序员文章站
2024-01-26 10:10:55
...
学习笔记，仅供参考，有错必纠
参考自：CSS中文文档
CSS
伪类
| 伪类 | 意义 |
|---|---|
:link |
伪类将应用于未被访问过的链接 |
:hover |
伪类将应用于有鼠标指针悬停于其上的元素 |
:active |
伪类将应用于被**的元素，如被点击的链接、被按下的按钮等。 |
:visited |
伪类将应用干己经被访问过的 |
:focus |
伪类将应用于拥有键盘输入焦点的元素 |
注意：CSS有一个层叠的特定，所以必须按照LVHA的顺序使用.
- 举个例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类</title>
<style>
a:link {
color: red;
}
a:visited {
color: purple;
}
a:hover {
background-color: silver;
color: white;
}
a:active {
color: yellow;
}
/*LoVe HAte*/
.txtName:focus {
background-color: green;
}
a:focus {
font-size: 20px;
}
</style>
</head>
<body>
<a href="#">当前网站</a>
<a href="http://www.baidu.com">百度的官网</a>
<a href="http://www.jd.com">新浪官网</a>
<div>
<input type="text" class="txtName">
</div>
</body>
</html>
页面：
伪元素
CSS伪元素(pseudo-element)可以用来添加一些选择器的特殊效果。
元素的语法：
选择器:伪元素 {属性:值;}
:first-line
“first-line” 伪元素用于向文本的首行设置特殊样式。
- 举个例子
现在，我们把文本的第一行背景色设置为红色：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪元素</title>
<style>
.datam:first-line {
background-color: red;
}
</style>
</head>
<body>
<p class="datam">
数据挖掘通常与计算机科学有关，并通过统计、在线分析处理、情报检索、机器学习、专家系统（依靠过去的经验法则）和模式识别等诸多方法来实现上述目标.
数据挖掘是人工智能和数据库领域研究的热点问题，所谓数据挖掘是指从数据库的大量数据中揭示出隐含的、先前未知的并有潜在价值的信息的非平凡过程。数据挖掘是一种决策支持过程，它主要基于人工智能、机器学习、模式识别、统计学、数据库、可视化技术等，高度自动化地分析企业的数据，作出归纳性的推理，从中挖掘出潜在的模式，帮助决策者调整市场策略，减少风险，作出正确的决策。知识发现过程由以下三个阶段组成：①数据准备；②数据挖掘；③结果表达和解释。数据挖掘可以与用户或知识库交互。
</p>
</body>
</html>
页面：
:first-letter
“first-letter” 伪元素用于向文本的首字母设置特殊样式。
- 举个例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪元素</title>
<style>
.datam:first-letter {
background-color: red;
font-size: 20px;
}
</style>
</head>
<body>
<p class="datam">
数据挖掘通常与计算机科学有关，并通过统计、在线分析处理、情报检索、机器学习、专家系统（依靠过去的经验法则）和模式识别等诸多方法来实现上述目标.
数据挖掘是人工智能和数据库领域研究的热点问题，所谓数据挖掘是指从数据库的大量数据中揭示出隐含的、先前未知的并有潜在价值的信息的非平凡过程。数据挖掘是一种决策支持过程，它主要基于人工智能、机器学习、模式识别、统计学、数据库、可视化技术等，高度自动化地分析企业的数据，作出归纳性的推理，从中挖掘出潜在的模式，帮助决策者调整市场策略，减少风险，作出正确的决策。知识发现过程由以下三个阶段组成：①数据准备；②数据挖掘；③结果表达和解释。数据挖掘可以与用户或知识库交互。
</p>
</body>
</html>
输出：
:first-child
对于属于第一个子元素的元素设置特殊样式。
- 举个例子
选择第一个子元素为span的所有标签。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪元素</title>
<style>
span:first-child {
background-color: yellow;
color: red;
}
</style>
</head>
<body>
<p>
<span>第一个</span>
<span>第二个</span>
<span>第三个</span>
</p>
<div>
<span>AAA</span>
<span>BBB</span>
<span>CCC</span>
</div>
</body>
</html>
输出：
:before 和:after
“:before” 伪元素可以在元素的内容前面插入新内容
“:after” 伪元素可以在元素的内容之后插入新内容
- 举个例子1
在文本的同一行前后加入"-------" ：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪元素</title>
<style>
div:before, div:after {
content: "-------";
}
</style>
</head>
<body>
<div>
俺是div标签
</div>
</body>
</html>
页面：
- 举个例子2
在文本的上下以块级标签的形式加入"-------"：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪元素</title>
<style>
div:before, div:after {
content: "-------";
display: block;
}
</style>
</head>
<body>
<div>
俺是div标签
</div>
</body>
</html>
页面：
上一篇： Mysql数据库索引优化
下一篇： 初识jQuery