Question

您好我们有很多页面要设置CSS

.cms-index-noroute .col-main .std {font-weight: bold}
.cms-index-list .col-main .std {font-weight: bold}
.cms-index-view .col-main .std {font-weight: bold}

我们宁愿把这个CSS写成

.col-main .std {font-weight: bold}

但是有一个问题，它会使用选择器

打破页面上的所有内容

.cms-index-index

问题：是否有CSS符号表示.col-main .std {font-weight: bold}可以在所有页面上工作，除了它位于.cms-index-index占位符的页面。< / p>

Answer 1

您可以将:not()与child combinator一起使用，假设.cms-index-index是.col-main的父级：

＆＃13;

:not(.cms-index-index) > .col-main .std {
    font-weight: bold;
}

＆＃13;

<div class='cms-index-noroute'><span class='col-main'><span class='std'>Span 1</span></span></div>
<div class='cms-index-list'><span class='col-main'><span class='std'>Span 2</span></span></div>
<div class='cms-index-view'><span class='col-main'><span class='std'>Span 3</span></span></div>
<div class='cms-index-index'><span class='col-main'><span class='std'>Span 4</span></span></div>

＆＃13;

Answer 2

Check out this fiddle：

.col-main .std {
    font-weight: bold
}
.cms-index-index .col-main .std {
    font-weight: normal
}

更具体的选择器将始终覆盖那些不具有的选择器。

所有页面上的占位符中的CSS，除了一个：howto？

2 个答案: