Question

我在移动应用程序项目中使用AngularJS和Cordova（离子），并且所有内容都使用相同的page个perse。所有内容都加载到一个index.html文件中，因此body, html, ion-view, ion-content元素都在每个“页面”/“界面”之间共享

基本上，我的所有接口都设置了唯一标识符：

<ion-content id="interface-name">...</ion-content>

但是，在此界面中，我需要确保以下元素具有以下样式：

html, body, ion-view, ion-content, .scroll {
    height: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

这样界面可以全屏显示。这很好，花花公子，但它导致我的其他界面无法垂直滚动/扩展的问题。

如果存在子id /类，是否有一种方法（使用CSS）仅应用样式，例如，仅当id="interface-name"应用于子元素时才应用上述样式？

Answer 1

没有。这是＆＃34;级联＆＃34;层叠样式表的一部分。这是一种自上而下的方法，你无法重新上线。

Answer 2

如果您希望上面的代码适用于ID /类，例如仅适用于id =“interface-name”

#interface-name {
    height: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

Answer 3

您可以在页面加载时使用JavaScript函数执行此操作，但是您无法有条件地对子元素的存在应用CSS规则。像

这样简单的东西

var parent = document.getElementById("elementId").childNodes;
var children = parent.childNodes;
for(child in children) {
    if(child.id == "theIdYouAreLookingFor") {
        parent.style.height = "100%";
        // set other CSS rules here
        // ...
        break; // we're done, no need to check other children
    }
}

如果存在子类，是否可以应用CSS样式？

3 个答案: