伪类
伪类即不同元素不同状态表示不同样式
-
静态伪类
link:超链接点击之前的样式
visted:超链接在点击之后的样式
#静态伪类仅用于超链接,用的少 -
动态伪类
hover:鼠标放到元素上的状态
active:点击时未松开鼠标左键的状态
focus:输入框在获得焦点时的状态(即文本输入光标闪烁时状态)
#动态伪类适用于任何元素,常用
伪元素
伪元素即文档中没有出现的元素
first-letter选择的是元素中第一个文字
first-line标签中的第一行,会随着浏览器的缩放自动调整效果
before元素内容之前添加新内容,必须配合content使用(无法被选中)
after元素内容之后添加新内容 必须配合content使用 (无法被选中)
#伪元素可以认为是新的元素改变样式
#伪类使用:
伪元素使用::
以下为简易导航栏制作,鼠标悬停可变色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
nav{width:1000px;height:40px;background:black;margin:100px auto}
nav div{width:100px;height:40px;line-height:40px;float:left;color:white;text-align: center;}
nav div:hover{
font-size: 20px;
color: papayawhip;
}
</style>
</head>
<body>
<nav>
<div id="">电脑办公</div>
<div id="">平面设计</div>
<div id="">室内设计</div>
<div id="">影视动画</div>
<div id="">工业自动</div>
<div id="">会计课程</div>
<div id="">人工智能</div>
</nav>
</body>
</html>
效果如下:
以下为伪元素制造下划线实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
ul{
width: 200px;
margin: auto;/*注释*/
}
ul li{
width:200px;
height:50px;
line-height: 50px;
text-align: center;
}
ul li::after{
content:"";
display:block;/*换行*/
border-bottom: 1px solid yellowgreen;/*设置边框下划线与颜色*/
/*还可在其后添加div块,后代码改为
* ul li div{
* border-bottom: 1px solid yellowgreen;
* }
* 即可
*/
}
</style>
</head>
<body>
<ul>
<li>醉里论道,醒时折花1</li>
<li>醉里论道,醒时折花2</li>
<li>醉里论道,醒时折花3</li>
<li>醉里论道,醒时折花4</li>
<li>醉里论道,醒时折花5</li>
</ul>
</body>
</html>
效果如图: