可通过属性选择器、伪元素和结构选择器间接控制文本样式。例如,[title*="错误"]匹配含“错误”的title属性,.warning::before插入警告图标,p:first-of-type定位首个段落,结合text-overflow实现文本省略,从而在限制下实现文本相关样式控制。

在CSS中,无法直接通过选择器“选择”文本内容本身进行提取或修改,但可以通过一些技巧来匹配包含特定文本的元素,或者对文本内容进行样式控制。以下是几种实用的方法和技巧:
1. 使用属性选择器匹配包含特定文本的元素
虽然CSS不能直接选择“纯文本”,但可以利用属性选择器来选中具有特定属性值(包括文本类属性)的元素。
例如,选中所有title属性中包含“错误”的元素:code:
[title*="错误"] {
color: red;
}
说明:[*=] 表示属性值包含指定字符串,[title*="错误"] 会匹配所有title中包含“错误”二字的元素。
常见属性选择器:
立即学习“前端免费学习笔记(深入)”;
技术上面应用了三层结构,AJAX框架,URL重写等基础的开发。并用了动软的代码生成器及数据访问类,加进了一些自己用到的小功能,算是整理了一些自己的操作类。系统设计上面说不出用什么模式,大体设计是后台分两级分类,设置好一级之后,再设置二级并选择栏目类型,如内容,列表,上传文件,新窗口等。这样就可以生成无限多个二级分类,也就是网站栏目。对于扩展性来说,如果有新的需求可以直接加一个栏目类型并新加功能操作
- [attr="value"] — 完全匹配
- [attr^="value"] — 以某字符串开头
- [attr$="value"] — 以某字符串结尾
- [attr*="value"] — 包含某字符串
2. 结合伪元素控制文本内容显示
CSS可以通过
::before和
::after伪元素向元素内部插入文本内容,并对其进行样式设置。 例如,在每个警告类元素前添加“⚠️”:
.warning::before {
content: "⚠️ ";
font-weight: bold;
}
注意:content属性只能用于::before和::after,且仅适用于支持该特性的元素(如块级、行内块等)。
3. 利用结构选择器间接定位含文本的元素
如果目标文本位于某个固定结构中(比如某个位置的段落),可以使用结构选择器精确定位。
例如,选择第一个段落:p:first-of-type {
font-weight: bold;
}
或选择包含特定子文本的父元素中的文本:
div strong:only-child {
color: blue;
}
4. 文本样式控制技巧
虽然不能“选择”文本内容,但可以控制文本的呈现方式:
- text-indent:控制首行缩进
- text-overflow:处理溢出文本(如省略号)
- white-space:控制空白符处理方式
- word-break / word-wrap:控制换行行为
- letter-spacing / word-spacing:调整字符/单词间距
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 200px;
display: inline-block;
}
基本上就这些。CSS选择器不能像JavaScript那样“查找并操作文本内容”,但结合属性选择器、伪元素和结构定位,可以实现很多基于文本内容的样式控制效果。关键是理解其局限性,并善用现有工具间接达成目标。不复杂但容易忽略细节。









