Question

正如我们所知，有几个CSS快捷方式（大于，没有间距加入的类等等）但是我想知道我们是否可以声明多个父CSS类，而孩子们保持不变？

为方便起见，我使用了一个简单的例子......

而不是：

.node-type-sponsors .container .page-header, 
.node-type-supporters .container .page-header 
{color:blue;}

通过指定要受影响的父类是否有更短的写入方式，但只列出一次子项...

例如：

.node-type-sponsors,.node-type-supporters 
[I assume something would go here to signify we've moved onto child elements] 
.container .page-header 
{color:blue;}

Answer 1

不可能没有sass / less等

作为黑客，如果你有完全相同的情况 you have a pattern matching in an class name either at start or end你可以做类似的事情，你可以看到开始匹配属性

 [class^="node-type"] .container{}

工作演示：

＆＃13;

[class^="node-type"] .container{
color:red;
}

＆＃13;

<div class="node-type-sponsors">
  <p class="container ">abc</p>
 </div>
<div class="node-type-supporters">
  <p class="container">abc</p>
 </div>

＆＃13;

Answer 2

在此代码段中，具有父项<p>的每个div元素或具有指定类的span都会获得黄色背景。您正在寻找>组合子。

.this-is-a-div, .this-is-a-span > p {
    background-color: yellow;
}

<span class="this-is-a-span">
<p>Paragraph in a span.</p>
</span>

<div class="this-is-a-div">
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
</div>

<p>Paragraph 3. Not in a div.</p>
<p>Paragraph 4. Not in a div.</p>

您可以阅读更多相关信息here。希望有所帮助。

我们可以声明多个父CSS类，而子节点保持不变吗？

2 个答案: