通常 CSS 类会改变标签的格式。例如下面的代码
<head>
<style type="text/css">
.r {background-color:green; color:white; font-weight:bold}
</style>
</head>
<body>
<ul>
<li>Item 1</li>
<li class="r">Item 2</li>
<li>Item 3</li>
<li class="r">Item 4</li>
<li>Item 5</li>
</ul>
</body>
使具有“r”类的项目显示为没有项目符号并且背景颜色为整个页面宽度。
如何不将格式应用于标签本身，而仅应用于内容（在本例中为文本），而无需在其中放置额外的标签？
您根本无法在 CSS 中格式化标签；您只能格式化元素。（例如，您无法格式化标签<ul>，但您可以格式化使用标签<ul>和</ul>它们之间的内容标记的元素。）
因此，您似乎在问如何设置元素内容的样式，而不是设置元素本身的样式，而不插入内部元素。一般的答案是你不能。这并不意味着内部元素需要用 HTML 标记编写；它也可以使用 JavaScript 动态插入。例如，下面的简单代码在页面上的div每个li元素中插入一个内部元素，并在 CSS 中使用相应修改的选择器：
<style>
.r > .item-content {
background-color:green; color:white; font-weight:bold;
}
</style>
<script>
window.onload = function() {
var li = document.getElementsByTagName('li');
for(var i = 0; i < li.length; i++) {
li[i].innerHTML = '<div class=item-content>' + li[i].innerHTML + '</div>';
}
}
</script>
在所描述的特殊情况下，具体问题是元素的color属性li除了影响元素内容外，还会影响列表标记（项目符号）。这可以在特殊情况下使用:first-line伪元素来处理，.r:first-line而不是使用.r. 这将color: white仅适用于元素内容的第一行，因此列表项目符号不会受到影响。但是，伪元素的宽度只是行上字符所占据的宽度，而不是可用的宽度li。当然，当它被分成两行或多行时，方法会错误地设置项目的样式。
除了:first-lineand之外:first-letter，当前定义和实现的 CSS 中没有办法引用元素的内容或部分内容，当它不构成内部元素时。
ul li:nth-child(even) {
background-color:green;
color:white;
font-weight:bold
}