【问题标题】:How to override global stylesheet如何覆盖全局样式表
【发布时间】:2008-10-08 04:10:42
【问题描述】:

简而言之,有一个全局样式表:

a { font-family: Arial; }

我想为特定链接使用不同的字体系列:

<a href="..." style="font-family: Helvetica;">...</a>

<span style="font-family: Helvetica;"><a href="...">...</a></span>

但没有任何效果。有没有简单的方法可以做到这一点?

附:我动态地(通过 PHP)为不同的链接分配不同的字体,所以创建一个特殊的类不是一个选项。

【问题讨论】:

    标签: html css stylesheet


    【解决方案1】:

    除非您有一个名为 Helvetica 的特定字体,否则您应该意识到在某些平台上(例如 Windows,通过 FontSubstitutes),Helvetica 是 Arial 的别名。这可能是问题的根源。换一种字体试试看。

    【讨论】:

      【解决方案2】:

      你的第一次尝试

        <a href="..." style="font-family: Helvetica;">...</a>
      

      应该有效。同意您可能缺少字体。内联样式优先于用户定义样式表之外的任何其他样式。以下是样式定义的优先顺序:

      1. 用户自定义样式
      2. 嵌入式或内联样式表
      3. 内部样式表
      4. 外部样式表
      5. 浏览器默认样式

      在样式表中,优先级如下:

      1. 任何标记为 !important 的内容
      2. 身份证

      3. .class
      4. 元素

      此外,您还有更具体的规则:div a 覆盖 a

      这里是a good article with more detail on the subject

      @Kip 的建议是你最好的选择。

      【讨论】:

        【解决方案3】:

        你写的应该可以工作,除非问题是 Chris 指出的,

        当您得到一对可以正常工作的字体时,您可能会认为这样做的更好方法是为特殊链接声明一个类,以某种方式提醒自己为什么它们需要单独的字体(也许是因为您希望它们特别引人注目?)

        a { font-family: Arial; }
        a .noticed { font-family: Helvetica; }
        

        然后在 HTML 中:

        <a class="noticed" href="...">...</a>
        

        通过在链接周围创建一个 span 标签来更改字体,或者为链接添加内联样式,这只是 &lt;font&gt; 标签的旧时代的味道。

        【讨论】:

          【解决方案4】:

          元素样式会覆盖全局样式,因此 Chris Jester-Young 可能是对的,而您实际上并没有 Helvetica 字体;尝试不同的字体,例如您确定存在的 Courier 或 Times New Roman

          【讨论】:

            猜你喜欢
            • 1970-01-01
            • 2019-05-21
            • 2022-11-10
            • 2020-09-06
            • 2012-01-18
            • 1970-01-01
            • 2017-04-02
            • 2020-10-11
            • 2019-02-20
            相关资源
            最近更新 更多