css 在标签上的样式不生效

在 web 开发中，css 是一项重要的技能，通过 css 我们可以对网页的样式进行控制。然而，有时候我们会发现在标签上设置的样式不生效，这对于我们排查问题带来了不少麻烦。

造成这种情况的原因有很多，下面我们来一一分析。

  div class="container">
        h1>
    这是一个标题/h1>
        p>
    这是一段文本/p>
      /div>
    

1. 权重问题

css 样式设置时，不同的选择器具有不同的权重。如果你在样式表中为一个元素指定了一条样式，同时在 html 标签上也为该元素指定了样式，那么权重高的样式会被采用。举个栗子，比如下列 html 代码：

  style>
    p {
          font-size: 16px;
          color: red;
    }
      /style>
        p style="font-size: 14px;
    ">
    这是一段文本/p>
    

在这个例子中，p 标签上设置的 font-size: 14px 样式不生效，实际上是因为样式表中指定的样式权重大于标签上指定的样式。

2. 样式继承问题

有些 css 属性的继承是有限制的，比如 input 的 type 属性。如果你在一个表单中，给 input[type="text"] 添加了一些样式，你会发现 input[type="password"] 不会继承这些样式。因此，为了保证样式能够被正确应用到指定元素上，我们需要仔细研究哪些属性是可以被继承的。

3. 属性值为默认值

有些元素的样式默认值是自动继承父元素的样式，比如 body 标签和 div 标签。如果你的 css 样式中为这些元素设置了和默认样式一样的样式，那么这些样式就不会生效。

总之，对于 css 样式不生效的情况，需要首先检查权重、继承和默认值等问题。只有当我们仔细分析问题的原因，才能快速排除问题。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！