Fatal编程技术网
  • html/
  • Html CSS：仅对标记内容应用格式

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

html css formatting

Html CSS：仅对标记内容应用格式,html,css,formatting,Html,Css,Formatting,通常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</

通常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{背景色：绿色；颜色：白色；字体大小：粗体}

    

  • 项目1
    • 
第2项

  • 项目3
    • 
第4项

  • 项目5
    •
使具有“r”类的项目显示时不带项目符号，且背景颜色为整个页面宽度

如何不将格式应用于标记本身，而仅应用于内容（本例中为文本），而不必在其内部添加额外的标记？

您根本无法在CSS中格式化标记；只能格式化元素。（例如，您不能格式化标记
，但可以格式化使用标记
和
以及标记之间的内容标记的元素。）

ul li:nth-child(even) {
    background-color:green;
    color:white;
    font-weight:bold
}
因此，您似乎在问如何设置元素内容的样式，而不是设置元素本身的样式，而不插入内部元素。一般的答案是你不能。这并不意味着内部元素需要用HTML标记编写；它也可以用JavaScript动态插入。例如，下面的简单代码在页面上的每个
li
元素中插入一个内部
div
元素，并在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>


.r>.item内容{
背景色：绿色；颜色：白色；字体大小：粗体；
}
window.onload=函数（）{
var li=document.getElementsByTagName（'li'）；
对于（变量i=0；i
在所描述的特殊情况下，具体问题是
li
元素的
color
属性除了影响元素内容外，还影响列表标记（项目符号）。在特殊情况下，可以使用伪元素处理此问题，使用
.r:first-line
而不仅仅是
.r
。这将使
color:white
仅应用于元素内容的第一行，因此列表项目符号不会受到影响。但是，伪元素的宽度正好是行中字符占用的宽度，而不是
li
的可用宽度。当然，当项目被分成两行或多行时，这种方法会使项目的样式错误

除了
：first-line
和
：first-letter
，当前定义和实现的CSS中，当元素的内容或部分内容不在内部元素中时，无法引用元素的内容或部分内容。

您希望对标记的内容应用什么格式？
font-weight:bold
等样式已仅适用于文本内容。这并不能解决问题。它解决了一个完全不同的问题（关于如何在不使用
class
属性的情况下设置偶数项的样式）。