Question

我使用Javascript动态追加html，并希望附加一些css和html。在我的代码中，浏览器只选择了表的css，而 th 的css没有显示出来。

的Javascript

var html = "<table class = 'table'>";
    html += "<thead>";
        html += "<tr><th>";
        html += "Name: " + data.name;
        html += "</th></tr>";
    html += "</thead>";

    html += "<tbody>";
        html += "<tr><td>";
        html += "Address: " + data.address;
        html += "</td></tr>";
        html += "<tr><td>";
        html += "Phone: " + data.phone;
        html += "</td></tr>";
    html += "</tbody>";
html += "</table>";

$(".info").html(html);

CSS

.table {
    border: 1px solid red;
}

.th {
    /* not applied successfully */
    color: red; 
}

为什么会这样？

Answer 1

您没有指定班级ln。您必须根据您的CSS th进行操作。

或者您可以更改样式表：只需删除 th 前面的点。

Answer 2

您有>>>> import re >>>> a = "Here is a shortString with various issuesWith spacing" >>>> re.sub(r"(?<=[a-z])(?=[A-Z])", " ", a) >>>> Here is a short String with various issues With spacing课程，但没有.table

的课程

.th

也许尝试将CSS更改为

    html += "<tr><th class='th'>";
    html += "Name: " + data.name;
    html += "</th></tr>";

}

.table {
border: 1px solid red;

删除类标识符

Answer 3

发生这种情况的原因是您没有<th元素的匹配CSS选择器。您期望工作的选择是寻找具有.th类的元素，但是，没有任何元素。

一种解决方案是删除CSS中的类选择器，只使用元素本身：

th {
  color: red
}

（注意没有点）

CSS仅适用于表而不适用于表头（th）

3 个答案: