CSS伪类:
1.伪类的概念:
可以理解为描述元素的某种状态,用于当已有元素处于的某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的。
2.伪类的语法:
标签:伪类{设置的样式,伪类可以与 CSS 类配合使用}
/* 鼠标覆盖在元素上面显示红色 */
div:hover{
background-color: red;
}
3.伪类的常用实例
- 设置鼠标悬停在元素上时的样式
- 为已访问和未访问链接设置不同的样式
- 设置元素获得焦点时的样式
4.常用伪类:
伪类选择器 | 例子 | 作用 |
---|---|---|
:hover | a:hover | 鼠标覆盖在元素上状态 |
:active | a:active | 鼠标在元素上并按下左键 |
:link | a:link | 元素链接点击前的样式 |
:visited | a:visited | 元素链接点击后的样式 |
:focus | input:focus | 获取焦点的样式 |
:frst-child | li:first-child | 第一个子级 |
:frst-of-type | ul li:first-of-type | 特定的第一个子级 |
:last-child | li:last-child | 最后一个子级 |
:last-of-type | ul li:last-child | 特定的最后一个子级 |
:nth-child(n) | li:nth-child(2n) | 第n个子元素(2n为2的倍数) |
:nth-of-type(n) | li:nth-of-type(3n+1) | 指定类型的第n个子元素(3n+1为3的倍数+1) |
:nth-last-child(n) | li:nth-last-child(n) | 倒数第n个子元素 |
:nth-last-of-type(n) | li:nth-last-of-type(n) | 指定类型的倒数第n个子元素 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>伪类选择器</title>
<style>
div{
/* 常态 */
width: 100px;
height: 100px;
background-color: pink;
}
/* 鼠标覆盖在元素上面显示红色 */
div:hover{
background-color: red;
}
a:link{
/* 链接前 */
color: tomato;
}
a:visited{
/* 链接后 */
color: skyblue;
}
a:hover{
/* 鼠标覆盖 */
cursor: pointer;
/* 鼠标覆盖后变小手效果 */
}
a:active{
/* 响应 */
/* 鼠标在元素上并按下左键 */
color:pink;
}
input{
outline: 0;
}
input:focus{
/* 获取焦点 (获取光标) */
border: 2px solid orange;
}
li:first-child{
/* 只能是第一个li,li是第一个只级 */
color: red;
}
li:last-child{
color: red;
}
ul li:first-of-type{
/* 第一个li类型的标签,li不用是第一个子元素 */
color: skyblue;
}
li:nth-child(2){
color:purple;
}
/* 2n为2的倍数 3n+1等公式*/
li:nth-of-type(2n){
color: hotpink;
}
</style>
</head>
<body>
<div></div>
<a href="https://ac.csdn.net">CSDN</a>
<br>
<input type="text">
<ul>
<h1>送给各位同学</h1>
<li>劝学诗</li>
<li>书中自有千钟粟。</li>
<li>书中自有黄金屋。</li>
<li>书中有马多如簇。</li>
<li>书中自有颜如玉。</li>
</ul>
</body>
</html>
<!-- a标签有4种伪类,建议按顺序书写 -->
<!-- link visited hover active -->
CSS伪元素:
1. 伪元素的概念:
可以理解为某个元素的子元素,但不存在于html中。用于创建一些不在文档树中的元素,并为其添加样式。
2.伪元素的语法:
标签::伪类{设置的样式,伪类可以与 CSS 类配合使用}
p::before{
content:"大家好,我是";
color:orange;
}
3.伪元素的常用实例:
- 设置元素的首字母、首行的样式
- 在元素的内容之前或之后插入内容
4.常用伪元素:
伪元素选择器 | 例子 | 作用 |
---|---|---|
::before | p::before | 在元素前插入内容 |
::after | p::after | 在元素后插入内容 |
::selection | p::selection | 选择用户选择的元素部分 |
::frst-line | div::first-line | 文本的第一行样式 |
::first-letter | div::first-letter | 选择文本的首字母,只用于块元素 |
::placeholder | input::placeholder | 只用于表单的提示文本 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>伪元素</title>
<style>
p{
color:skyblue;
}
p::before{
content:"大家好,我是";
color:orange;
}
p::after{
content:",欢迎大家学习c1";
color:tomato;
}
p::selection{
color:blue;
}
div{
width:400px;
}
div::first-line{
color: tomato;
}
div::first-letter{
font-size:40px;
}
input::placeholder{
color: pink;
}
</style>
</head>
<body>
<p>伪元素</p>
<div>富家不用买良田,书中自有千钟粟。安居不用架高堂,书中自有黄金屋。出门莫恨无人随,书中车马多如簇。娶妻莫恨无良媒,书中自有颜如玉。男儿若遂平生志,六经勤向窗前读</div>
<input type="text" placeholder="测试工具">
</body>
</html>