如何在单个页面上定位网站页脚?

Question

Html：

<footer id="colophon" 
class="site-footer footer 
bg-dark" role="contentinfo">
<div class="container 
footer-inner">
<div class="row">
<div class="footer-widget- 
area"><div class="col-md-3 
col-sm-6 footer-widget" 
role="complementary">
<div id="text-4" 
class="widget widget_text">          
<div class="textwidget"><p>. 
<a href="http://4309.co.uk/
contact/">Contact</a></p>
</div>
</div></div>

尝试过 css：

.page-id-3748>.site-
footer{position:relative 
!important;top: 100px! 
important;}

尝试仅在一页上定位页脚。我知道选择器是site-footer但我正在尝试特异性地做到这一点。

Answer 1

尝试删除 CSS 中的">"符号。

.page-id-3748 .site-footer {
position:relative !important;
top: 100px! important;
}

Answer 2

仅当其他方法不起作用时才使用 ！important。

因为 id 具有更高的优先级，所以您可以使用

.page-id-3748 #colophon { }

或者组合 2 个类选择器也会给你更多的优先级。

.page-id-3748 .site-footer.footer { }

或使用标签赋予其更高的优先级

.page-id-3748 footer.site-footer { }

如果您在站点页脚的其他地方使用了 ！important，那么这里的任何内容都不起作用。此外，如果您在样式中的其他地方否决了 .site-footer，则不会 wordk。