Question

通常，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”类的项目在没有项目符号且背景颜色与整页宽度的情况下显示。

如何将格式不应用于标签本身，而仅应用于内容（在这种情况下为文本）没有在内部添加其他标签？

Answer 1

你根本不能在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-line和:first-letter之外，CSS中没有办法像当前定义和实现的那样引用元素的内容或部分内容，当它不构成内部时元件。

Answer 2

ul li:nth-child(even) {
    background-color:green;
    color:white;
    font-weight:bold
}

CSS：仅对标记内容应用格式

2 个答案: