Question

我尝试使用堆栈作为解决我的编码问题的最后手段，但我找不到这个愚蠢的网站有什么问题。我正在为公司构建移动网站，我正在通过2个单独的样式表来完成它，这样当用户在小于指定分辨率的设备上时，它会使用不同的样式表。我已经完成了所有这些没问题。

我的问题是我的外部文档中的某些css样式没有应用于HTML文档中的相应元素。更具体地说，根本没有应用“.fb a”，“。tw a”和“.in a”中的任何一个。当我在html文档中内联应用它时，它可以工作，但我需要它在外部样式表中。我无法弄清楚为什么会这样。由于未应用背景图像，因此不会显示任何内容。更奇怪的是，页脚的其他元素显示正确，当我更改样式时，它会反映在网站上。请帮忙!!!

我的HTML：

<!-- FOOTER -->  
<div class="footwrap">
<div class="footer">

        <!-- CONTACT -->
        <div class="text">
            <!-- LEGALITY -->
<div class="comm">Oblique Drive technology is patents pending. Copyright © 2014. All Rights Reserved. Oblique Drive is a trademark of Callplex, Inc.</div>
        </div>

        <!-- SOCIAL NETWORKING -->
        <div class="sn">
            <a href="http://www.facebook.com/obliquedrive">
                <div class="fb">
                </div>
            </a>
            <a href="http://www.twitter.com/obliquedrive">
                <div class="tw">
                </div>
            </a>
            <a href="http://www.linkedin.com">
                <div class="in">
                </div>
            </a>
        </div>

</div>
</div>

我的CSS：

/*Footer*/
.footwrap {
    width: 100%;
    height: 175px;
    background-color: #444;
}
.footer {
    width: 90%;
    margin: auto;
    height: 175px;
    background-color: #444;
    position: relative;
    bottom: 0px;
}
.comm {
    width: 420px;
    margin: auto;
    height: 175px;
    font-size: 24px;
    margin-top: 20px;
    text-align: left;
    float: left;
}
.sn {
    width: 400px;
    float: right;
    margin-top: 30px;
    margin-right: 50px;
    display: block;

}
.fb {
    width: 75px;
    height: 75px;
    display: inline-block;
}
.fb a {
    display: block;
    width: 100px;
    height: 100px;
    background-image: url(images/sniconsm.jpg) !important;
    background-position: 0px 0px !important;
}
.tw {
    width: 75px;
    height: 75px;
    display: inline-block;
    padding-left: 30px;
}
.tw a {
    display: block;
    width: 75px;
    height: 75px;
    background-image: url(images/sniconsm.jpg);
    background-position: 150px 0px;
}
.in {
    width: 75px;
    height: 75px;
    display: inline-block;
    padding-left: 30px;
}
.in a {
    display: block;
    width: 75px;
    height: 75px;
    background-image: url(images/sniconsm.jpg);
    background-position: 75px 0px;
}
.footer .text {
    position: relative;
    display: inline-block;
    margin-left: 50px;
    margin-top: 15px;
    float: left;
    line-height: 170%;
    color: #ffffff;
}

此外，这里是页面实时，如果它有帮助，所有代码： http://thewolv.es/Oblique%20Drive/mobile

请忽略你看到的任何其他问题大声笑

Answer 1

仔细看看你的风格。您有.fb a，但HTML标记则相反：

<a href="http://www.facebook.com/obliquedrive">
   <div class="fb"></div>
</a>

如果您尝试定位div，则应使用a .fb。但实际上，你根本不需要那些div。只需将您的A标记更改为：

<a href="http://www.facebook.com/obliquedrive" class="fb"></a>

然后使用a.fb的CSS选择器（它们之间没有空格）。

Answer 2

你的A元素不是div的子元素，反之亦然..但是你的CSS将A元素定义为子元素。

外部CSS未应用

2 个答案: