Question

我正在处理CSS文件，我希望它能与其他CSS文件进行交互。怎么样？假设我有A.css和B.css。在A.css中我想做“溢出：隐藏”引用B.css及其控制的所有元素。有什么不可能的吗？

像：

@import "field.css"

.sky .field {
overflow:hidden;
}

基本上这就是我的实际情况：

.sky  {
width: 90%;
height: 100%;
background: blue;
opacity: 0.7;
position: absolute;
z-index: 1;
}

.field {
 width: 100%;
height: 20px;
background: green;
position: fixed;
top: 90%;
z-index: 2;
}

.field > p {
 width: 100%;
height: 40px;
background: black;
}

现在我想要那个“p”，它是.field的子标签，不显示在.sky范围之外。我该怎么做？

Answer 1

无需将一个CSS文件导入另一个只需链接到HTML中的两个CSS文件。例如，如果您有以下两个文件

档案A：

.sky .field {
    overflow:hidden;
}

档案B：

.sky {
    color: black;
 }

Sky会继承溢出隐藏和黑色的属性。如果规则相互矛盾，例如文件A表示天空颜色为蓝色而文件B表示黑色，那么最后链接的CSS规则表将占用总数。

编辑：一般来说，出于组织目的这样做是不好的做法。如果Sky是单个异议，请考虑将所有CSS引用放在一个文件中。

Answer 2

将两个CSS文件加载到您的页面中。实际上，您可以在同一元素上定义多个文件来定义样式规则。所以假设你有两个文件

File 1

.sky{
    background-color: Red;
 }

File 2

 .sky.field {
    overflow:hidden;
  }

然后让页面上有一个带有div和field类的元素。

<div class='sky field'></div>

现在这将有两个组合的CSS规则。

另外，请确保您熟悉 CSS优先级，如果2个文件在同一元素上具有不同的CSS规则，那么会发生什么？

Example

 //File 1
.sky{
   background-color: Red;
 }


 //File 2
 .sky.field {
    background-color: Blue;
  }

现在 HTML DOM中最后放置的文件将优先于其他规则。请注意its NOT the last file loaded but the last file in the DOM hirarchy获得优先权。

CSS：文件之间的交互

2 个答案: