如何在div内选择跨度？

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演示

<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代码无效。 您可以使用官方的W3C验证器检查您是否喜欢。 主要问题是声明属性时=两侧的空格。 仅在不同属性之间使用空格。 另外， h2元素是块类型元素，因此不允许在内联元素内部（例如span ）。

其次，CSS也并非全部有效。 首先，不需要像颜色名称所示那样大写。 color:red; 会很好。 另外，您还没有为font-size属性指定任何度量单位。 我假设您打算使文本为100pt，在这种情况下，您需要使用font-size:100pt; 。 其他有效的度量单位包括px ， cm和rem 。

如果您想了解更多信息，建议您阅读Mozilla开发人员网络上的信息以获取示例。 它包含有关HTML元素，CSS属性和JavaScript的准确页面。

编辑：

以下内容将有助于修复HTML：

• 将doctype更改为DOCTYPE ，以提高兼容性。
• 将所有script标签移到head标签中。
• 确保所有input s， button s等等都在form元素内。
• 删除=号周围的空格。
• 将样式表link标记的href属性设置为第二个属性，并将rel属性设置为第一个属性。 这主要是为了保持一致性。