爱站程序员基地伪类
伪类即不同元素不同状态表示不同样式
-
静态伪类
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>
效果如图：
