CSS-文本-光标-伪类

文本

text-shadow

text-shadow 为文本添加阴影效果。

p {
    text-shadow: 2px 2px 2px gray;
}

通过调整水平偏移量、垂直偏移量、模糊半径和颜色，可以实现不同的阴影效果，增强文本的视觉层次感。

text-overflow

text-overflow 控制当文本超出其容器时的显示方式。

div {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

使用 ellipsis 可以在文本溢出时显示省略号，常用于限制单行文本的显示长度，确保布局的整洁。

word-wrap

word-wrap 允许长单词或 URL 换行到下一行，避免布局破裂。

p {
    word-wrap: break-word;
}

在处理动态内容或用户生成的内容时，启用自动换行可以提升页面的可读性和适应性。

text-transform

text-transform 控制文本的大小写转换。

p {
    text-transform: uppercase;
}

通过设置为 uppercase、lowercase 或 capitalize，可以快速统一文本的大小写风格，提升设计的一致性。

text-indent

text-indent 设置文本的首行缩进，常用于段落格式化。

p {
    text-indent: 2em;
}

合理使用首行缩进有助于改善文本的可读性，特别是在长篇内容中。

光标

cursor

cursor 定义当鼠标悬停在元素上时显示的光标类型。

button {
    cursor: pointer;
}

选择合适的光标样式可以增强用户体验，明确元素的可交互性。

自定义光标

使用图片作为光标，实现独特的视觉效果。

div {
    cursor: url('path_to_cursor.png'), auto;
}

确保自定义光标图片具有适当的尺寸和透明度，并提供后备选项以兼容不支持自定义光标的浏览器。

伪类

伪类允许基于元素的特定状态（如悬停或被点击）来应用样式，提升交互性和用户体验。

hover

当元素被鼠标悬停时应用样式。

button:hover {
    background-color: blue;
}

通过改变背景色或其他样式，可以为用户提供即时的视觉反馈，增强交互感。

active

当元素被激活（例如，被点击）时应用样式。

button:active {
    background-color: red;
}

在按钮被点击时改变其样式，可以明确用户的操作反馈，提升界面的响应性。

focus

当元素获得焦点（例如，通过键盘导航）时应用样式。

input:focus {
    border: 2px solid blue;
}

为可交互元素添加焦点样式，有助于提高表单的可访问性，尤其对使用键盘导航的用户。

nth-child 和 nth-of-type

选择其父元素的第 n 个子元素或特定类型的第 n 个子元素。

li:nth-child(odd) {
    background-color: lightgray;
}

p:nth-of-type(2) {
    font-weight: bold;
}

使用 nth-child 和 nth-of-type 可以实现复杂的布局和样式规则，如交替行颜色或特定位置元素的特殊样式。

not

选择不匹配给定选择器的所有元素。

div:not(.special) {
    color: red;
}

not 伪类有助于排除特定元素，灵活地应用样式规则，避免重复和冗余。

before 和 after

在元素内容的前面或后面插入内容，实现装饰性效果。

p::before {
    content: "Note: ";
    font-weight: bold;
}

通过 ::before 和 ::after 伪元素，可以添加图标、装饰线或其他视觉元素，增强内容的表达力。

链接资源

更多关于 CSS3 属性的信息，请访问 MDN Web 文档。