渡一教育：CSS选择器
此演示仅在桌面端浏览器中可用
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS 选择器</title>
<style>
.form-container {
margin: 0 auto;
width: 200px;
height: 80px;
}
.txt:focus {
border-color: #409eff;
}
.form-block {
transition: 0.5s;
}
.form-block:focus-within {
background-color: green;
}
.label span:has(+ input[data-required])::after {
content: "*";
color: #f40;
}
</style>
</head>
<body>
<div class="form-container">
<div class="form-block">
<label class="label">
<span>姓名</span>
<input type="text" data-required class="txt" />
</label>
</div>
<div class="form-block">
<label class="label">
<span>地址</span>
<input type="text" class="txt" />
</label>
</div>
<div class="form-block">
<label class="label">
<span>电话</span>
<input type="text" class="txt" />
</label>
</div>
</div>
</body>
</html>常规必填的做法是通过添加一个 span 标签，在为其设置样式
但必填是和文本内容无关，这里巧妙的运用了伪类和自定义属性来选择性的控制必填符号的显示
此演示仅在桌面端浏览器中可用
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS 选择器</title>
<style>
.content::first-letter {
font-size: 4em;
text-transform: uppercase;
float: left;
line-height: 1;
margin-right: 10px;
}
.content::selection {
background: #333;
color: #fff;
}
</style>
</head>
<body>
<p class="content">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magni veniam
voluptas, fugiat, voluptate, quas voluptatem quia doloremque
exercitationem obcaecati voluptatum nihil. Quae, voluptas. Quae, voluptas.
</p>
</body>
</html>常规思路：为第一个字母添加样式，为选中的文本添加样式
这里使用 ::first-letter 伪元素为第一个字母添加样式，避免了修改文本结构
::selection 伪元素为选中的文本添加样式