子类的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内的所有容器将具有不同的样式（背景颜色）
• H1内的所有.container-n都具有相同的风格。 （颜色，字体等）

这是一个示例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