html - 仅将 CSS 应用于一个页面

Question

我需要将 CSS 应用到除 Wordpress Twenty Sixteen 主题主页之外的所有页面的 header 。目前我正在手动执行此操作:

.page-id-24 #masthead {
padding: 5%;
background-image: url(...);
background-size: 1400px 500px;
height: 10px;
margin-bottom: 5%;
}

.page-id-14 #masthead {
padding: 5%;
background-image: url(...);
background-size: 1400px 500px;
height: 10px;
margin-bottom: 5%;
}

有什么方法可以让我编写类似 #masthead not:(home) {...} 的内容来大幅加快流程并更改除主页以外的所有页面上的 header 。

谢谢，

jack

Answer 1

欢迎来到 StackExchange!

很高兴你提到“二十一十六”作为你的主题。我能够在 wordpress.org 上提取您的主题演示，并为您的目的确定一个可接受的选择器。请引用以下内容:

body:not(.home) #masthead { /* Stylish */}

这个选择器应该适合你。

http://codepen.io/anon/pen/LZGmLV

:not() 选择器的工作方式是它被视为一个伪类，可以接受一个简单的选择器来取反。在我们的例子中，我们正在寻找一个元素(更具体地说，您的 <header> 元素)，其“ header ”ID 仅在首页。此外，我们使用此选择器从我们的样式中排除。

.

建议进一步阅读:

https://developer.mozilla.org/en-US/docs/Web/CSS/:not