仅将 CSS 应用于一页

Question

我需要将 CSS 应用到除 Wordpress Twenty Sixteen 主题主页之外的所有页面的标头。目前我正在手动这样做：

.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) {...} 的东西来大大加快进程并更改除主页以外的所有页面上的标头。

谢谢，

杰克

Answer 1

欢迎来到 StackExchange！

很高兴你提到 "Twenty Sixteen" 作为你的主题。我能够在 wordpress.org 上提取您的主题的演示，并为您的目的确定一个可接受的选择器。请参考以下内容：

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

这个选择器应该适合您。

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

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

.

建议进一步阅读：

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

仅将 CSS 应用于一页

Applying CSS to one page only

html

css

wordpress-theming