html - 子类的CSS属性选择器

Question

只是好奇。

如果我有这样的 CSS 规则:

.section{width:100%;min-height:200px;}
.section.container-1{background:blue;}
.section.container-2{background:red;}
.section.container-3{background:orange;}

是否可以使用

css attribute selector

这样我就可以写这样的东西了:

.section.[class*='container-'] h1{color:white}

澄清一下:

• 我将有一个结构，其中 .section 是所有 DIV(宽度和高度)的公共(public)类
• .section 中的所有容器将具有不同的样式(背景颜色)
• .container-n 中的所有H1 都具有相同的样式。 (颜色、字体等)

下面是一个示例 HTML 代码，以使其更加清晰:

<div class="section container-1"><h1></h1><!--Will display blue background and white text --></div>
<div class="section container-2"><h1></h1><!--Will display red background and white text --></div>
<div class="section container-3"><h1></h1> <!--Will display orange background and white text --></div>

我知道我可以用不同的方式做到这一点，而且我已经知道该怎么做，我只是想知道上面的事情是否可能。

谢谢

Answer 1

是的，它会起作用。只需删除属性选择器前面的句点。

.section.[class*='container-'] h1
/*      ^ remove that.. it's an attribute selector, not a class. */

Example Here