如何在单个页面上定位站点页脚？

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

只有在其他方法都不起作用的情况下，才使用！重要。

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

.page-id-3748 #colophon { }

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

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

或者使用标签来赋予它更高的优先级

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

如果你在site-footer的其他地方使用了!important，那么这里的任何东西都不起作用。另外，如果你已经在你的样式中的其他地方否决了.site-footer，这将不会生效。