59 lines
1.7 KiB
HTML
59 lines
1.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>16_伪元数选择器</title>
|
||
<style>
|
||
/* 什么是伪元数？- 像元素但不是元素（element），是元素中的一些特殊位置 */
|
||
|
||
/* 选中的是div中的第一个文字 */
|
||
div::first-letter {
|
||
color: red;
|
||
font-size: 20px;
|
||
}
|
||
|
||
/* 选中的是div中第一行的文字 */
|
||
div::first-line {
|
||
background-color: yellow;
|
||
}
|
||
|
||
div::selection {
|
||
background-color: green;
|
||
color: orange;
|
||
}
|
||
|
||
/* 选中的是input元素中的提示文字 */
|
||
input::placeholder {
|
||
color: skyblue;
|
||
}
|
||
|
||
/* 选中的是p元素最开始的位置，随后创建一个子元素 */
|
||
p::before {
|
||
content: "￥";
|
||
}
|
||
|
||
/* 选中的是p元素最后的位置，随后创建一个子元素 */
|
||
p::after {
|
||
content: ".00";
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore deleniti laboriosam quisquam sunt suscipit
|
||
obcaecati cumque quod, mollitia, voluptatem dolorum cum necessitatibus culpa recusandae atque magni maxime.
|
||
Quaerat sunt labore debitis dolore dolores velit voluptatem, harum tempora accusamus ducimus illo deserunt iure
|
||
iusto? Tenetur velit corrupti, vel eius dolore totam ut ad earum repudiandae, aperiam est. Fuga sapiente
|
||
necessitatibus doloremque!</div>
|
||
<input type="text" placeholder="请输入你的用户名">
|
||
<p>700</p>
|
||
<p>700</p>
|
||
<p>700</p>
|
||
<p>700</p>
|
||
<p>700</p>
|
||
|
||
</body>
|
||
|
||
</html> |