<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/* 得到焦点 */
:focus {
outline-color: #ff0000;
}
/* 默认状态 */
:enabled {
border-color: green;
}
/* 禁用 */
:disabled {
border-color: red;
}
/* 选择首字母 */
p::first-letter {
color: red;
}
/* 选取首行 */
.line::first-line {
color: orange;
}
/* 选取用户选取部分 */
.select::selection {
color: #fff;
background-color: gray;
}
/* 禁止用户选择 */
.dissel::selection {
user-select: none;
}
/* 中间穿过 */
.text-line {
/* 贯穿线 */
text-decoration: line-through solid gray;
}
/* 首行缩进 */
.t-indent {
text-indent: 2em;
}
/* 字体溢出 */
.over {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
100px;
border: 1px solid red;
}
</style>
</head>
<body>
<div>
获得焦点：<input type="text" />
默认状态：<input type="text" />
禁用状态<input type="text" disabled />
</div>
<p>
Hello,HTML!首字母
</p>
<div class="line">Hello,HTML!首行</div>
<div class="select">可以选中11111111111111111111111111</div>
<div class="dissel">禁止选中2222222222222222222222222</div>
<div class="text-line">中间穿过333333333333333</div>
<div class="t-indent">
首行缩进正常行正常行正常行<br/>正常行正常行正常行
</div>
<div class="over">字体溢出省略号字体溢出省略号字体溢出省略号字体溢出省略号字体溢出省略号字体溢出省略号</div>
</body>
</html>