个人中心
gpt4 book ai didi

css - 对特异性基础的误解 5

转载 作者：太空宇宙 更新时间：2023-11-03 17:29:15 24 4
gpt4 key购买 nike

我遇到了一个严重的问题(尽管结果可能是我完全不理解!)关于在使用 Foundation 5 时覆盖文本颜色。

目前我有这段代码:

<!doctype html>
<html class="no-js" lang="en">
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <title>Foundation | Welcome</title>
        <link rel="stylesheet" href="css/foundation.css"/>
        <script src="js/vendor/modernizr.js"></script>
        <link href="http://fonts.googleapis.com/css?family=Oswald|Lato:300,400,300italic,400italic" rel="stylesheet" type="text/css">
        <link href="styles.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <section class="">
            <div class="row text-center">
                <div class="columns medium-12">
                    <h1>Heading 1</h1>
                    <h2>Heading 2</h2>
                    <h3>Column title</h3>
                    <h4>Heading 4</h4> 
                    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
                </div>
            </div>
        </section>
        <section>
            <div class="row text-right">
                <div class="columns medium-12">
                    <h1>Heading 1</h1>
                    <h3>Column title</h3> 
                    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
                </div>
            </div>
        </section>
        <section style="background-color: #ff9900;">
            <div class="row">
                <div class="columns medium-12">
                    <h1>Powerful Distribution<br>Networks</h1>
                    <h3>Road, Air, Rail or Sea<br>We've got it covered!</h3> 
                    <p>Providing 1st class logistics services worldwide. This is trucking powerful niche template which will show your users what they can get from some very simple classes and typography styling!</p>
                </div>
            </div>
        </section>
        <section class="">
            <div class="row">
                <div class="columns medium-12">
                    <h3>Column title</h3> 
                    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
                </div>
            </div>
        </section>
        <script src="js/vendor/jquery.js"></script>
        <script src="js/foundation.min.js"></script>
        <script>
      $(document).foundation();
    </script>
    </body>
</html>

到目前为止一切都非常标准。

现在我想做的是为不同的部分设置不同颜色的背景，然后在这些部分中的任何文本我也应该能够设置它的颜色。

将一个类放在其中一个部分并为其设置背景色 #ff9900 效果很好，但如果我随后尝试找到一种方法将这些部分内的文本设置为一种颜色，那么我就会继续被事实上，标准的 Foundation 框架已经设置了那种颜色。

我需要能够为不同的部分设置不同的颜色，然后还需要为其中的任何文本设置特定的颜色，但目前我尝试的大多数方法都不起作用。我知道这是一个特殊性问题，但似乎无法使任何事情正常工作。我唯一可以轻松更改的是 p 标签，但我希望能够轻松更改一个部分中的所有文本。

如果我取出基础 css 样式表，使页面仅使用标准 html 代码，没有从外部设置 css，那么如果我说向部分添加了一个类，则说 class="black"(糟糕的我知道 ;-) )，然后在声明该样式的页面中放置一个 css 样式标签，这样我就可以一次性设置该部分的背景颜色和文本颜色。那里有 Foundation 样式表意味着如果我这样做，它只会覆盖该部分中的 p 标记，而我希望能够设置该部分中的所有文本，而不管。

这在标准 html 中是可行的:

<style type="text/css">
<!--
.black {
background: #000;
color: #fff;
}
-->
</style>

<section class="black">
            <div class="row text-center">
                <div class="columns medium-12">
                    <h1>Heading 1</h1>
                    <h2>Heading 2</h2>
                    <h3>Column title</h3>
                    <h4>Heading 4</h4> 
                    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
                </div>
            </div>
        </section>

如果我在将 Foundation 样式表添加到页面的情况下执行此操作，那么只有 p 标签会被设置为白色，而不会将任何标题标签设置为白色。

我认为这与 Foundation 为其样式表中的所有 header 设置了 color: #222; 这一事实有关，这将覆盖我所做的一切。

因此，我是否可以安全地从 Foundation 中删除该样式声明，或者它会让我更头疼吗？

如有任何帮助，我们将不胜感激。

非常感谢，

标记

最佳答案

这是因为 ZURB 基金会专门为标题定义了字体颜色，但没有为段落定义字体颜色 - 段落颜色继承自正文。

如果您通常为您更改段落颜色的部分定义字体颜色，那么因为它比正文颜色更具体并且将被继承到段落。尽管为标题准确定义的颜色比为标题所在的部分定义的颜色更具体，但不会继承和重写。

如果您想更改标题的颜色，您必须专门针对标题进行更改。有更多方法可以实现这一点。

1) 您正在使用仅作为 CSS 文件分发的 ZURB Foundation

在这种情况下，除了直接在 CSS 中更改它之外别无他法。

CSS

.black {
  background: black;
  color: white;
}

.black h1, .black h2, .black h3, .black h4, .black h5, .black h6 {
  color: white;
}

CodePen Example

2) 您正在使用 ZURB Foundation 作为带有 SCSS 文件的元素

这里有两种可能性。如果您使用的是 _settings.scss 文件，您可以将变量 $header-font-color 重新定义为您想要的任何值。如果您使用继承值，那么标题行为与段落行为完全相同 - 颜色继承自为整个部分定义的颜色。

如果您不想使用设置文件，您可以将重定义放在样式定义中任何您想要的位置，但此文件是变量重定义的标准位置。

SCSS

$header-font-color: inherit;

.black {
  background: black;
  color: white;
}

当然，另一种解决方案是编写您自己的 SCSS 样式来实现此行为。

SCSS

@each $color, $bg-color in (white, black),
                           (silver, green),
                           (yellow, blue) {

  .#{$bg-color} {
    background: $bg-color;
    color: $color;

    h1, h2, h3, h4, h5, h6 {
      color: $color;
    }
  }
}

编译后的 CSS

.black {
  background: black;
  color: white;
}

.black h1, .black h2, .black h3, .black h4, .black h5, .black h6 {
  color: white;
}

.green {
  background: green;
  color: silver;
}

.green h1, .green h2, .green h3, .green h4, .green h5, .green h6 {
  color: silver;
}

.blue {
  background: blue;
  color: yellow;
}

.blue h1, .blue h2, .blue h3, .blue h4, .blue h5, .blue h6 {
  color: yellow;
}

CodePen example

关于css - 对特异性基础的误解 5，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30901967/

24 4 0
文章推荐： ruby - MiniTest:如何测试退出关键字
文章推荐： c# - 线程结束后执行一条语句
文章推荐： ruby-on-rails - 跨 Controller 抽象 before_actions 的优雅方式？
文章推荐： ruby-on-rails - 如何简化大条件
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com