大家好，欢迎来到IT知识分享网。
一、教学视频
教学讲解视频：视频地址
二、伪元素介绍
伪元素：用于创建一些不在DOM树中的元素，并为其添加样式。
三、::before和::after
::before 伪元素可以用来创建一个内部元素，它的内容会覆盖在父元素的内容之前。
::after 伪元素可以用来创建一个外部元素，它的内容会覆盖在父元素的内容之后。
这里有个注意点，content是必须的，如果不写content，伪元素会失效。
先看下面简单的应用：
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <style> div::before {
content: '哈哈，'; color: red } div::after {
content: '，您好！'; color: green } </style> <div>杨杨吖</div> </html> 
再举个例子，鼠标悬浮改变下拉箭头方向，松开再次改变：
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <style> div {
position: relative; width: 200px; height: 35px; line-height:35px; } div::after {
content: ""; position: absolute; top: 8px; right: 10px; width: 10px; height: 10px; border-right: 1px solid #000000; border-bottom: 1px solid #000000; transform: rotate(45deg); transition: all 0.3s; } div:hover::after {
content: ""; position: absolute; top: 8px; right: 10px; width: 10px; height: 10px; border-right: 1px solid #000000; border-bottom: 1px solid #000000; transform: rotate(225deg); transition: all 0.3s; } </style> <div>杨杨吖</div> </html> 
四、::first-line和::first-letter
::first-line 只能用于块级元素。用于设置附属元素的第一个行内容的样式。
::first-letter 只能用于块级元素。用于设置附属元素的第一个字母的样式。
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <style> div::first-line {
color: green; } </style> <div>杨杨吖<br/>杨杨吖</div> </html> 
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <style> div::first-letter {
color: green; } </style> <div>杨杨吖<br/>杨杨吖</div> </html> 
五、::selection
::selection 匹配鼠标长按拖动选中的内容。
六、::placeholder
::placeholder 用于设置input元素的placeholder内容的样式。
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <style> input::placeholder {
color: red; } </style> <input placeholder="请输入"/> </html> 
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/125361.html
