CSS嵌套：从谁那里继承？

这里是问题的一个小提琴：
https://jsfiddle.net/c2exs2f7/3/CSS嵌套：从谁那里继承？

如何在第二个“蓝色”留像第一个实例（它应该有color: white）不改变HTML结构？

HTML

<div class="blue"> 
    <div class="content"> 
    <div class="label">blue</div> 
    <div class="yellow"> 
     <div class="content"> 
     <div class="label">yellow</div> 
     <div class="blue"> 
      <div class="content"> 
      <div class="label">blue</div> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div>

SCSS

// Skip until... 

div { 
    border-radius: .25em; 
    padding: .5em; 
    font-family: helvetica, sans-serif; 
} 

// ...here: 

.blue { 
    background-color: hsl(220,100%,50%); 

    .content { 
    color: white; 
    } 
} 

.yellow { 
    background-color: hsl(60,100%,50%); 

    .content { 
    color: hsl(0,0%,10%); 
    } 
}

编辑＃1 感谢您对这些快速响应的家伙！
我正在一个网格系统，我可以嵌套不同的网格系统（具有不同的CSS值）。

来源

2015-04-06 michaelcssguy

拥有一个jsfiddle是一个很好的补充，但你应该总是包含问题本身的重要部分。一个问题（也是一个答案）应该始终是独立的，因为外部链接可能会失效。 – 2015-04-06 00:20:37

好的。谢谢！我很喜欢这个:) – michaelcssguy 2015-04-06 00:41:25

选择器.yellow .content和.blue .content具有相同specificity（20在这种情况下），因此，后来出现在样式表选择器将覆盖第一个由于样式表的级联性质。在这种情况下，选择器.yellow .content覆盖.blue .content，这就是嵌套的.blue元素为黑色的原因。

一个快速的解决办法是选择与选择.blue .blue嵌套.blue元素：

：

Updated Example

.blue, 
.blue .blue { 
    background-color: hsl(220,100%,50%); 

    .content { 
     color: white; 
    } 
}

一个可以说是更好的方法是只使用child selector, >选择直接.content子元素

Updated Example

.blue { 
    background-color: hsl(220,100%,50%); 

    > .content { 
     color: white; 
    } 
} 

.yellow { 
    background-color: hsl(60,100%,50%); 

    > .content { 
     color: hsl(0,0%,10%); 
    } 
}

根据您的意见，元素的排序/分层可能会有所不同。另一种解决办法是设置.blue/.yellow元素上的color属性，然后设置子元素来inherit的color属性：

Updated Example - 这似乎对所有变体工作。

.blue { 
    background-color: hsl(220,100%,50%); 
    color: white; 

    .content { 
     color: inherit; 
    } 
} 

.yellow { 
    background-color: hsl(60,100%,50%); 
    color: hsl(0,0%,10%); 

    .content { 
     color: inherit; 
    } 
}

来源

2015-04-06 00:17:31

我喜欢这种第一种方法，但如果HTML标记是“黄色>黄色>蓝色”，它将不起作用：https：//jsfiddle.net/jzbjd655/1/。有没有更好的方法来实现这一点，而没有声明每一种可能的混合蓝色和黄色的特定顺序？使用子选择器的第二个例子是这个简单的例子，但我不确定是否可以保证母亲和孩子之间不会有一些“图层”-div。 – michaelcssguy 2015-04-06 00:51:21

伟大的新解决方案。有没有类似的方式来实现我的目标，而不给予蓝色的白色？如果我有一个网格系统，你的解决方案不会那么好。在你的例子中，没关系.blue和.yellow获得一种颜色。如果在我的真实项目中，像“.row”这样的父级获得“.column”宽度属性的值，那就不太好了。 – michaelcssguy 2015-04-06 01:36:38

见https://jsfiddle.net/c2exs2f7/4/

我所做的就是强制继承仅归DIV，而不是整个descendance孩子content。

在SCSS中应用直接子女操作员>使得.content div仅考虑其直接父亲颜色。

继续尝试嵌套更多DIV s，你会看到它的工作原理。

来源

2015-04-06 00:22:27 Niloct

你不行。不管怎样因为第二个蓝色将从黄色固有。所以如果你想要所有的蓝色总是有白色字母和黄色总是黑色字母。为什么不只是放：

.blue { color: #fff; } 
.yellow { color: hsl(0,0%,10%); }

而且你将不需要“.content”包装。

来源

2015-04-06 00:25:07 stevenvanc

这是一个好主意。我的问题是我的代码是对网格系统的一些简化。 – michaelcssguy 2015-04-06 00:54:44

CSS嵌套：从谁那里继承？

回答

相关问题