将文本颜色应用于HTML列_Html_Css_Html Table_Col

将文本颜色应用于HTML列

html css

将文本颜色应用于HTML列,html,css,html-table,col,Html,Css,Html Table,Col,十进制的十六进制烧焦这是内部tr，因此它不采用字体颜色这是我的解决方案，它不是一个完美的解决方案，但不必添加单独的类第一个孩子{ 颜色：绿色； } th:nth-child2{ 颜色：黄色； } 十进制的十六进制烧焦这将选择您提到的整个列： <!DOCTYPE html> <html> <head> <style> tr > th:first-child, td:first-child {

十进制的十六进制烧焦

这是内部tr，因此它不采用字体颜色

这是我的解决方案，它不是一个完美的解决方案，但不必添加单独的类

第一个孩子{ 颜色：绿色； } th:nth-child2{ 颜色：黄色； } 十进制的十六进制烧焦

这将选择您提到的整个列：

<!DOCTYPE html>
<html>
<head>
    <style>
        tr > th:first-child, td:first-child {
            color: green;
        }
    </style>
</head>
<body>
    <table>
        <colgroup>
            <col style="color: green"/>
            <col style="background-color:green"/>
            <col class="char"/>
        </colgroup>
        <tr>
            <th>
                Decimal
            </th>
            <th>
                Hex
            </th>
            <th>
                Char
            </th>
        </tr>
        <tr>
            <td>
                3244.21
            </td>
            <td>
                #8217
            </td>
            <td>
                c
            </td>
        </tr>
    </table>
</body>

我一辈子都搞不懂为什么十进制不是绿色的

因为当应用于col元素时，只有样式规则的一小部分有任何效果

CSS 2.1规范

17.3栏表格单元格可能属于两种上下文：行和列。但是，在源文档中，单元格是行的后代，而不是列的后代。但是，单元格的某些方面可能会受到列属性设置的影响

下列属性适用于列和列组元素：

“边界” 只有在table元素上的“border collapse”设置为“collapse”时，各种边框属性才适用于列。在这种情况下，列和列组上设置的边框将输入到冲突解决算法，该算法在每个单元格边缘选择边框样式

“背景” 背景属性设置列中单元格的背景，但仅当单元格和行都具有透明背景时。请参见表格图层和透明度

“宽度” “width”属性提供列的最小宽度

“可见性” 如果列的“可见性”设置为“折叠”，则不会渲染列中的任何单元格，并且会剪裁跨越其他列的单元格。此外，表的宽度会随着列的宽度而减小。请参见下面的动态效果。“可见性”的其他值无效

注意上面列表中没有“颜色”。它不适用于col元素，并且不能以您尝试使用它的方式使用

但是，正如其他人所指出的，通常足以设置第n个表列样式的另一种策略是使用or或伪类以该列中的单元格为目标：

th:第一个孩子，td:第一个孩子{ 颜色：蓝色；背景：粉红色； } th:n-child2，td:n-child2{ 颜色：白色；背景：绿色； } th:最后一个孩子，td:最后一个孩子{ 字体大小：粗体；背景：橙色； } 蓝色加粉红色白对绿橙色加粗福酒吧巴兹一二三

我仍然不明白为什么col方法不起作用这里的解决方法很好，但是试图解释为什么在col上设置颜色不起作用是毫无意义的。所有表格单元格都在tr中，如果这是在列上设置的样式无法应用于它们的原因，那么也就意味着列上的背景色不应该工作。为什么标准说只有背景色工作，而我的实验表明只有背景色工作，这个例子显示了前景色的作用？我的Chromium浏览器不尊重我自己页面中的颜色：绿色，但它在这里尊重。bg颜色是关于可以应用的单一规则。它不会直接应用于单元格，而是在绘制列的区域的表格背景顶部后面。将bg添加到tr或td/th将隐藏它，而不是替换它。您可以使用rgba颜色查看col/tr和单元格背景颜色的混合。梯度或图像可能不会显示在背景色上。@G-Cyr呃，你的第一句话几乎正确，但不完全正确。还有一些其他CSS属性可以在列上使用，即边框、宽度和可见性。至于背景影响列的区域而不是每个单元格的想法，这是有点真实的，规范甚至有一个显示您描述的内容的视图！但不完全如此；单元格之间的间距将无法获得背景色。重叠背景层的概念模型只是确定单元格背景的一种方法。与其发布代码，不如详细解释一下您的答案及其相关性。当我在第一列中为单元格设置了rowspan=2时，它也会中断。样式将应用于下一行第2列中的单元格。这是一种痛苦~

    <style>
th:first-of-type{color:red;}
</style>
<table>
  <colgroup>
    <col/>
    <col style="background-color:green" />
    <col class="char" />
  </colgroup>
  <tr>
    <th>
      Decimal
    </th>
    <th>
      Hex
    </th>
    <th>
      Char
    </th>
  </tr>
</table>


----------