无法覆盖网页模板中的内联 CSS答案

【问题标题】：Cannot override inline CSS from web page template无法覆盖网页模板中的内联 CSS
【发布时间】：2020-07-09 07:52:47
【问题描述】：

我很难为一个以免费 HTML 模板开始的网页覆盖内联样式。我曾尝试使用“！important”关键字，但它并没有覆盖它。当我在 Chrome 中检查元素时，我可以关闭“padding-top: 164px”的“element.style”部分，但我无法在 CSS 中摆脱它。我是初学者，所以我确定我只是错过了一些东西，但我不知道还要搜索什么。

为了澄清，问题在于将 div 的顶部填充设置为 164px 的内联样式，我希望它更小。

html:

<!DOCTYPE html>
<html>
<head>
    <title>Senkadagala</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link href='http://fonts.googleapis.com/css?family=Roboto:400,300,100,400italic,500,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="css/main.css">




<script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/singlepagenav.js"></script>
    <script type="text/javascript" src="js/queryloader.js"></script>    
    <script type="text/javascript" src="js/main.js"></script>

    <meta charset="UTF-8">
    <meta name="description" content="Senkadagala - a simple HTML template">
    <meta name="keywords" content="web design, web development, branding, Social media marketing, print media design, digital design, HTML,CSS,XML,JavaScript">
    <meta name="author" content="PixelMock">

    <link rel="icon" type="image/png"  href="img/fav.png" />
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top top-nav" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">
            <p class="slogan">"Members First, Service Always."</p>
          </a>
        </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li><a href="#home">Home</a></li>
            <li><a href="#services">Services</a></li>
            <li><a href="#calendar">Calendar</a></li>
            <li><a href="#intranet">Intranet</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>

这里是有问题的区域：

    <div class="content"  id="home">
        <div class="section section1">
            <div class="container">
                <div class="row">
                    <img src="img/TransPatriotLogo.png">
                </div>
                <div class="row">
                    <h4 class="bodytext">Symitar for Windows 2</h2>
                </div>

                <div class="row">
                    <h5 class="bodytext">
                        © 2016 - Patriot Federal Credit Union
                    </h5>
                    <h5 class="bodytext">
                        All Rights Reserved
                    </h5>
                </div>

            </div>
        </div>

下一个不应该重要的部分：

        <div class="section section2" id="services">
            <div class="container">
                <div class="row" id="services-row">
                    <h3 id="services-title">Services</h3>
                    <p>
                        Services go here.
                    </p>

                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id ultricies felis. Fusce sed nisi velit. Quisque cursus pharetra diam, non congue ligula sodales at. Phasellus sodales sem sagittis arcu vulputate dictum. Vestibulum faucibus malesuada risus. 
                    </p>

...continued...

这是 CSS：

body
{
    text-align: center;
    padding: 0px;
    margin: 0px;
    font-family: "Roboto",sans-serif;
    font-size: 12px;
    color:#d3d3d3 !important;
}

body .text-color1 
{
    color: #882565;
}

body .text-color2 
{
    color: #C54D8D;
}

.container
{
    /*width:1200px;*/
    margin: 0px auto;
    /*text-align: left;*/
}

.top-nav
{
    position: fixed;
    height: 70px;
    padding-top: 10px;
    padding-bottom: 10px;
    width:100%;
    background-color: #f8f8f8;
}

.top-nav li a
{
    font-size:16px;
    font-family: "Roboto";
    font-weight: bold;
    color:#0e3d83 !important;
}

.slogan
{
    color: #0e3d83;
    font-family: "Monotype Corsiva";
    font-weight: bold;
    font-size: 26px;
    margin-top: 15px;
}

.bodytext
{
    color: #0e3d83;
    font-family: "Trebuchet MS";
    font-weight: bold;
}

.navbar li .current
{
    background-color: transparent;
    color: #d92727 !important;
    outline: none;
}

.navbar-brand
{
    padding-top: 0px;
}

.top-nav li a:hover
{
    color:#C54D8D!important;
}

.navbar-inverse
{
    border: none;
    box-shadow: 0px 1px 5px #0e3d83;
}

.content
{
    padding-top:70px;
}

.section1
{
    background: url(../img/whiteflag.png);
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:50% -400px;
}

.logo-row
{
    padding-top: 0px;
}
.section1 .main-logo
{
/*  background: url("../img/TransPatriotLogo.png") no-repeat scroll center center rgba(0, 0, 0, 0);
    height: 200px;
    width: 500px;
    margin-left: auto;
    margin right: auto; */
}

.section1 h2
{
    color: #0e3d83;
    font-family: "Trebuchet MS";
    font-weight: bold;
}

.section1 p
{
    font-size: 20px;
    color: #0e3d83;
    font-family: "Trebuchet MS";
    font-weight: bold;
}

.section2
{
    padding-top: 100px;
    /*padding-bottom: 200px;*/
}

.section2 .intro-text
{
    /*text-align: left*/
}

.section2 img
{
    margin: 0 auto;
}

.section2 h3#services-title
{
    font-family: "Roboto", sans-serif;
    font-size: 34px;
    color: #0e3d83 !important;
    font-weight: 300;
    margin-bottom: 40px;
}

.section2 .team
{
    padding: 150px 0px 100px 0px;
}

.section2 .team img
{
    margin:0px auto;
}

.section2 .team h3.team-name
{
    color:#848484;
    margin-bottom: 5px;
}

.section2 .team h4.team-subtitle
{
    margin-top: 0px;    
    font-weight: lighter;
    color:#848484;
    margin-bottom: 20px;
}

.section2 .team p.team-details
{
    text-align: center;
    font-size: 16px;
}

.section2 p
{
    color: #848484;
    font-size: 18px;
    font-family: "Roboto", sans-serif;
    margin-bottom: 20px;
    font-weight: 300;
    text-align: left
}

.section3
{
    background: url(../img/workspace-sub.jpg) rgba(213,30,155, 0.6);
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:50% 0%; 
    padding-top: 200px;
    padding-bottom: 200px;
}

.section3 .container
{
    
}

.section3 img.img-responsive
{
    margin: 0 auto;
}

.section3 h3
{
    color: #848484;
    font-weight: 400;
}

.section3 p
{
    color: #848484;
    font-weight: 300;
    font-size: 18px;
}

.section4
{
    /*height:600px;*/
}

.item 
{ 
    width: 20%; 
    background-color: red;
    height:300px;
    float:left;
    position: relative;
}

.item.w2 
{ 
    width: 25%; 
}

.item.w3
{
    width: 40%; 
}

.item .hidden-item
{
    display: none;
}

.portfolio
{   
    padding: 100px 0px
}

.portfolio #portfolio-introduction
{
    margin-bottom: 100px;
    margin-top: 100px;
    color: #828282;
}

.portfolio #portfolio-introduction p
{
    font-size: 24px;
    font-weight: lighter;
}

.portfolio #portfolio-items
{
    border-top: 1px solid #D6D6D6;
    border-bottom: 1px solid #D6D6D6;
}

.portfolio .item .hover-content
{
    width: 100%;
    height: 100%;
    background: #8a0175;
    opacity: 0.8;
    position: absolute;
    padding: 20px;
    display: none;
    transition:all 0.5s ease 0s;
    cursor: pointer;
}

.portfolio .item .hover-content h3
{
    font-size: 34px;
    font-weight: lighter;
    color: #fff;
    position: relative;
    top:30%;
}

.portfolio .item:hover .hover-content
{
    display: block;
}

.portfolio .item  .portfolio-popup h3
{
    margin-bottom: 30px;
    margin-top: 0px;
    color:#828282;
} 

.portfolio .item .portfolio-popup p
{
    color: #828282;
    line-height: auto;
    font-size: 18px;
    font-weight: lighter;
}


.portfolio .item .portfolio-popup .popup-image-container
{
    padding: 20px;
}

.portfolio .item .portfolio-popup .popup-image-container img
{
    margin: 0 auto
}

.portfolio .item  .portfolio-popup .portfolio-item-description
{
    border-bottom: 1px solid #8D8D8D;
    padding: 40px;
    text-align: left;
}

.portfolio .item .portfolio-popup .labels
{
    margin-top:20px;
    line-height: 30px;
}


.portfolio .item  .portfolio-popup .portfolio-item-description span.label
{
    font-family: "Roboto", sans-serif;
    font-size: 12px;
    font-weight: lighter;
}

.portfolio h3
{
    font-size: 60px;
    font-family: "Roboto", sans-serif;
    font-weight: lighter;
}

.footer
{
    background: url(../img/footer-bg.jpg) repeat-x left bottom #000;
    /*padding-top: 200px;*/
}

#contact
{
    /*padding-bottom:80px;*/
    font-family:"Roboto", sans-serif;
    font-weight:300;
    min-height:600px;
}

#contact #contact-us-header
{
    font-size: 44px;
    font-weight: lighter;
    margin-bottom: 50px
}

#contact #contact-form input[type=submit]
{
    background-color:#C54D8D;
    border:1px solid #882565                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        
}

#contact #contact-form
{
    text-align: left;
}

#contact #contact-form label
{
    font-size: 16px;
    font-weight: lighter;
}

#contact .contact-description p
{
    font-size:20px;
}

.sm-wrapper
{
    margin-top:30px;
    margin-bottom:50px;
}


.sm-wrapper a:hover
{

}

.sm-container
{
    width:32px;
    height:32px;
    display:block;
    float:left;
    background:url(../img/sm-sprite.png) no-repeat;
    margin-right:10px;
}

.sm-container:hover
{
    /*border-bottom:5px solid #C54D8D;*/
    cursor:pointer;
}

.sm-facebook
{
    background-position:0px -32px;
}

.sm-linkedin
{
    background-position:0px -64px;
}

.sm-gplus
{
    background-position:0px -96px;
}

.sm-skype
{
    background-position:0px -128px;
}


/* end of contact section */



/* Landscape phones and down */
@media (max-width: 480px) { 

    .section2 p
    {
        font-size: 18px;
        font-weight: 300;
    }

    .section2 img
    {
        padding-bottom: 60px;
    }

    .item,.item.w2 , .item.w3
    { 
        width: 100%; 
    }

    .portfolio .item  .portfolio-popup h3
    {
        font-size: 42px;
    } 

    .portfolio .item .portfolio-popup p
    {
        font-size: 16px;
        font-weight: lighter;
    }

    .section2 .team img
    {
        padding-bottom: 0px;
    }

    .section3 .service-item
    {
        margin-bottom: 50px
    }

    .section3 .service-item p
    {
        font-size: 18px;
        margin: 0 auto;
        width: 75%;
    }


 }

/* Landscape phone to portrait tablet */
@media (min-width: 481px) and (max-width: 767px) {
    .section3 .service-item
    {
        margin-bottom: 50px
    }

    .section3 .service-item p
    {
        font-size: 18px;
        margin: 0 auto;
        width: 75%;
    }

    .section2 p
    {
        font-size: 20px;
        font-weight: 300;
    }

    .section2 img
    {
        padding-bottom: 0px;
    }

    .item,.item.w2 , .item.w3
    { 
        width: 100%; 
    }

    .navbar-nav
    {
        background-color:#F8F8F8
    }
}


/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 1024px) {
    .section2 img
    {
        padding-bottom: 60px;
    }

    .section2 p
    {
        font-size: 20px;
    }

    .section2 img
    {
        padding-bottom: 0px;
    }

    .section3 .service-item
    {
        margin-bottom: 50px;
        font-size: 18px;
    }

    .portfolio .item .hover-content
    {
        width: 100%;
        height: 100%;
        background: #8a0175;
        opacity: 0.8;
        position: absolute;
        padding: 20px;
        display: none;
        transition:all 0.5s ease 0s;
        cursor: pointer;
    }

    .portfolio .item .hover-content h3
    {
        font-size: 18px;
        font-weight: 300;
        color: #fff;
        position: relative;
        top:30%;
    }

    .portfolio .item:hover .hover-content
    {
        display: block;
    }

    .portfolio .item  .portfolio-popup h3
    {
        margin-bottom: 30px;
        margin-top: 0px;
        color:#828282;
        font-size: 42px;
    } 

    .portfolio .item .portfolio-popup p
    {
        color: #828282;
        line-height: auto;
        font-size: 16px;
        font-weight: lighter;
    }

    .item 
    { 
        width: 20%; 
        background-color: red;
        height:200px;
        float:left;
        position: relative;
    }

    .item.w2 
    { 
        width: 25%; 
    }

    .item.w3
    {
        width: 40%; 
    }

    .navbar-nav
    {
        float: right;
    }
}

/* Large desktop */
@media (min-width: 1025px) {
    .navbar-nav
    {
        float: right;
    }
}

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

【问题讨论】：

能否请您为此创建一个小提琴，然后很容易检查
好的，它在 JSFiddle 中没有正确输出...
如果在线，能否请分享链接，或者使用jsfiddle.net创建小提琴

标签： html css

【解决方案1】：

2种解决方法：

查看是否有任何 HTML 模板具有您想要的内联样式并将其删除
如果 1 不起作用：查找可能添加这些样式的任何 Javascript（使用文本编辑器中的搜索功能）。

【讨论】：

【解决方案2】：

使用!important 不应该是真正的答案。看起来某些 JavaScript 可能会在元素上设置该高度（不理想，但是嘿）。

我建议您查看您的 JS 文件中的数字 164 并查看结果。

我会先查看js/singlepagenav.js 和js/main.js

【讨论】：

由于我下载的模板中似乎使用了重要，所以我认为除非我使用新模板，否则船已经航行了。
完全没有，只是因为别人写了不好的代码，并不意味着你不能修复它。

【解决方案3】：

尝试将其称为 .section.section1 而不是 .section section1

喜欢：

.section.section1 {
padding-top:20px !important;
}

【讨论】：

好吧，就填充问题而言，这有效，但现在我的背景已经消失了
添加该类下内联的所有内容。不要忘记添加！重要
我认为 .section 和 .section1 有冲突。所以我取消了.section。我认为您的解决方案也可以。

【解决方案4】：

您需要检查您的 CSS 文件 .. 填充以元素样式显示，因此它不存在于内联中。在您的 CSS 文件内容类中，您提供了 padding-top 为 70 像素。这可能会增加您的空间。

【讨论】：

【解决方案5】：

您说您尝试了 !important 选项，但它不起作用，您尝试了什么？

类似：

.section1
{
    background: url(../img/whiteflag.png);
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:50% -400px;
    padding-top: 10px !important;
}

应该重写内联 CSS。

【讨论】：

我更改了 div 的类调用。我只做了“section1”而不是“section section1”，然后用 !important 添加了填充，它起作用了。

【解决方案6】：

在您回答的一些指导下，我想我偶然发现了解决方案，至少是一个解决方案，尽管它可能不是最佳实践。我的 div 类是

<div class="section section1">

显然这些是冲突的，所以我做到了

<div class="section1">

并将 CSS 更改为

.section1
{
    background: url(../img/whiteflag.png);
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:50% -400px;
    padding-top: 20px !important;
}

【讨论】：