我在用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;
}

===============>>#1 票数:5 已采纳

清理您的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;
}

===============>>#2 票数:1

尝试这个

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

===============>>#3 票数:0

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

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

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

编辑:

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

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

  ask by user41829 translate from so

未解决问题?本站智能推荐: