Question

我有一个严重的问题（可能会发现我完全缺乏理解！）关于在使用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 =＆＃34; black＆＃ 34; （糟糕，我知道;-)）然后在页面中放置了一个css样式标签，并声明了该样式我将能够一次性设置背景颜色和一个部分的文本颜色。在那里有基础样式表意味着如果我这样做它只会覆盖该部分中的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标签将设置为白色而不是任何标头标记。

我相信，基金会已经为其样式表中的所有标题设置了颜色：＃222; 这一事实，这无论我做什么都会超越。

因此，我可以安全地从基金会那里拿出那种风格声明，还是会让我更加头痛？

对此的任何帮助将不胜感激。

非常感谢，

标记

Answer 1

这是因为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

误解特异性基础5

1 个答案: