更改容器流体内元素的背景颜色答案

【问题标题】：Change background-color of element inside container-fluid更改容器流体内元素的背景颜色
【发布时间】：2017-08-08 12:54:54
【问题描述】：

如何更改嵌套在容器流体元素中的 h3 元素的背景颜色？

我已经为整个容器流体设置了背景颜色，但我希望 h3 元素具有不同的背景颜色。我想 h3 在容器流体下面，但我不知道如何更改层次结构。

这是我的html：

<section class="container-fluid" id="portfolio">

<h3 id="portfolio-title">PORTFOLIO</h3>

还有 CSS：

.container-fluid {
padding: 0 !important;
}

#portfolio-title {
background-color: #2E3747;
}

#portfolio {
background-color: #EFF0F0;
}

感谢您的帮助！

【问题讨论】：

标签： html twitter-bootstrap css containers background-color

【解决方案1】：

您的代码没有任何问题..这是要走的路

工作 sn-p

.container-fluid {
padding: 0 !important;
}

#portfolio-title {
background-color: blue;
color: red;
}

#portfolio {
background-color: green;
}

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<section class="container-fluid" id="portfolio">

<h3 id="portfolio-title">PORTFOLIO</h3>

【讨论】：

【解决方案2】：

试试这个 CSS

#portfolio {
background-color: #EFF0F0;
}

#portfolio #portfolio-title {
background-color: #2E3747 !important;
}

我刚刚将投资组合向上移动，然后将 h3 向下移动并使其变得重要

【讨论】：

不错！它有效，但我不明白它哈哈...为什么#portfolio 需要包含在第二个 CSS 条目中？
#portfolio 不是必需的，但它表明它是#portfolio-title 的父级，因此它只会在#portfolio 中定位标题，实际上有助于#portfolio 向上移动和#title 向下移动因为浏览器会逐行渲染 CSS。

【解决方案3】：

让我们试试这段代码

#porfolio:not(#portfolio-title) {
     background-color: #EFF0F0;
}



#portfolio-title {
     background-color: #2E3747;
}

选择.container-fluid，但不要选择porfolio-title。
希望对您有所帮助。

【讨论】：