Question

我在用css着色跨度时遇到了问题。一切都在网页上正常工作，但是当我尝试在div中选择一个跨度时它不起作用。我在这里丢失了一些蠢货吗？

<!doctype html>
<html>
<head>
    <title>Test</title>
    <link href="style/mainstyle.css" rel="stylesheet" type="text/css">
    <script src= https://code.jquery.com/jquery-latest.min.js></script>

</head>

<body>
    <header>
        <h1>TEST</h1>
    </header>

    <main>  
        <div class = "tab1 triad">
            <script src="primejs.js"></script>

            <span class="red"><h2>Type in a number and I'll check if it is prime:</h2></span>

            <input class = "primeNum" type = "text">
            <button class = "submit">Submit</button>

            <span class = "result">
                <h2>What I found: <span class = "answer">?</span></h2>
            </span>
        </div>  
    </main> 
</body>

这是css：

.tab1 span.red {
    color: RED;
    font-size: 100;
}

Answer 1

清理你的HTML，你有一些流浪和遗失的标签。

Bin demo

<div class="tab1 triad">
  <span class="red">
    <h2>Type in a number and I'll check if it is prime:</h2>
  </span>

  <input class="primeNum" type="text">
  <button class="submit">Submit</button>

  <span class="result">
    <h2>What I found: <span class="answer">?</span></h2>
  </span>
</div>

你的css在100之后错过了px

.tab1 span.red {
  color: red;
  font-size: 100px;
}

Answer 2

试试这个

.red {
    color: red;
    font-size: 100px; /* specify a unit like px, em, ... */
}

Answer 3

首先，您发布的HTML代码无效。您可以使用official W3C validator检查是否喜欢。主要问题是在声明属性时=两侧的空格。空间仅用于不同属性之间。此外，h2元素是块类型元素，因此不允许在内联元素内部（例如，span）。

其次，CSS也不是全部有效。首先，没有必要使用大写字母，如颜色名称所示。 color:red;可以正常使用。此外，您尚未为font-size属性指定任何度量单位。我假设您打算将文本设置为100pt，在这种情况下您需要使用font-size:100pt;。其他有效的衡量单位包括px，cm和rem。

如果您想了解更多信息，我建议您阅读有关Mozilla Developer Network的信息。它包含有关HTML元素，CSS属性和JavaScript的准确页面。

修改

以下内容有助于修复HTML：

将doctype更改为DOCTYPE，从而提高兼容性。

将所有script标记移至head标记。

确保所有input，button等都在form元素内。

删除=标志周围的空格。

将样式表href标记的link属性标记为第二个属性，并使rel属性成为第一个属性。这主要是为了保持一致性。

如何选择div内的跨度？

3 个答案: