CSS 组合选择

Question

我想知道是否有更简单的方法来定位以下css类，因为它可能会导致一点膨胀：

我有不同的单个页面，我想在其中禁用粘性标题效果，因为该页面上使用其他元素来修复。到目前为止，我使用以下方法选择这些类：

.page-id-xx .header-is-sticky .header {
position: static; 
}

如果我想禁用 20 页上的粘性标题，我最终会使用 20 次以上的选择器类，但只有 page-id-xx 会改变。它看起来像这样：

.page-id-1 .header-is-sticky .header,
.page-id-2 .header-is-sticky .header,
.page-id-3 .header-is-sticky .header,
and so on ... 

我想知道，是否有一种更智能的方法来定位 .header 类，也许在一些组合选择器的帮助下？或者有快速的javascript片段吗？也许通过检查元素 （#subnav） 的 ID 来创建一个 if 循环，该 ID 应该交替粘在该页面上的标题上？

提前致谢:)

Answer 1

可能不必要的特异性？

您是否绝对需要父选择器（即 page-id-n ），如果不是，那么显然以下内容会更优雅一些：

.header-is-sticky .header {
     position: static; 
}

利用 CSS 选择器

CSS 提供了一系列属性选择器，这些选择器可用于根据某些元素属性的各种约束来定位某些元素。开头和包含选择器应该可以满足您的需求。

/* This will match any element that has a class attribute that starts with "page-id" */
[class^="page-id"] .header-is-sticky .header {
    position: static; 
}
/* This will match any element that has a class attribute that contains "page-id" */
[class*="page-id"] .header-is-sticky .header {
    position: static; 
}