【问题标题】: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
      希望对您有所帮助。

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2020-10-11
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多