子类的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属性选择

，这样我可以写的东西，如：

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

只是为了澄清：

• 我将有一个结构，其中.section是普通类，所有的DIV（宽度和高度）
• 所有内部.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