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类，可能是在一些combiselectors的帮助下？或者有一个快速的JavaScript代码段？也许是一个if循环，通过检查元素的ID（#subnav），它应该与那些页面上的标题交替粘贴？

提前致谢：）

Answer 1

可能不必要的特异性？

你绝对需要父选择器（即page-id-n），如果没有，那么显然以下会更优雅：

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

利用CSS选择器

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

/* 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; 
}

CSS组合选择

1 个答案: