50 lines
1.3 KiB
HTML
50 lines
1.3 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<title>未来关注的CSS</title>
|
||
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
|
||
<link href="/jscss/style.css" rel="stylesheet" type="text/css" />
|
||
<style>
|
||
.c1:focus-within {
|
||
background-color: #e9f2ff;
|
||
}
|
||
.c2>label:has(+div>.imp)::after{
|
||
content: "*";
|
||
color: red;
|
||
}
|
||
.c3::selection{
|
||
background-color: #498ff1;
|
||
color:#973bee;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
父元素设置focus-within伪类，子元素获取焦点，父类响应。
|
||
<div class="ciy-form c1">
|
||
<label>关注</label>
|
||
<div>
|
||
<input type="text"/>
|
||
</div>
|
||
</div>
|
||
父元素选择器，子元素满足条件，父类响应。(CSS4特性，兼容性暂时不好)
|
||
<div class="ciy-form c2">
|
||
<label>必填项</label>
|
||
<div>
|
||
<input type="text" class="imp"/>
|
||
</div>
|
||
</div>
|
||
选中的样式
|
||
<div class="c3">
|
||
选中样式效果
|
||
选中样式效果
|
||
选中样式效果
|
||
选中样式效果<br/>
|
||
选中样式效果
|
||
选中样式效果
|
||
</div>
|
||
|
||
</body>
|
||
</html> |