app.css上的更改未应用于GUI

Question

我试图在NativeScript core.light.css 上更改按钮默认外观，所以在@import之后我添加了一些规则。有些正在应用，但有些则不适用。我几年来一直是网络开发人员，所以我对CSS / HTML非常熟悉，但在这里我真的很想念浏览器检查员，找出我的错误。

这是app.css中的CSS规则：

.nav Button {
  border: 1px solid grey;
  border-radius: 3px;
  margin: 5px;
  padding: 5px;
}

这就是我在page.component.html上的内容：

<StackLayout class="nav">
    <Button text="First" 
        [nsRouterLink]="['/first']"></Button>
    <Button text="Second"
        [nsRouterLink]="['/second']"></Button>
    <Button text="Third"
        [nsRouterLink]="['/third']"></Button>
    <Button text="Fourth"
        [nsRouterLink]="['/fourth']"></Button>
</StackLayout>

这就是它在iOS模拟器上的样子：

1px solid边界在哪里？我在这里缺少什么？

Answer 1

实时同步CSS文件在我这边按预期工作。 但是，请记住，NativeScript仅支持CSS的一个子集，而Web中的某些语法不适用于NativeScript

所以代替 border：1px solid grey;

使用

.nav Button {
    border-width: 1;
    border-color: gray;
    border-radius: 20;
}

可以找到支持的CSS属性列表here

Answer 2

您是否尝试将子选择器添加到css中？ https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors所以空格应该有效：/ https://docs.nativescript.org/ui/styling#hierachical-selector-css-combinators我只使用了>选择器。如果您认为它不能正常工作，请提交错误。

Answer 3

解决。在此发布解决方案，以帮助未来的受害者。

显然以前尝试过的所有配置都应该可行。常用的规则.nav Button，子选择器.nav > Button，.navbutton类应用于Button元素......这些都很好。虽然我不得不将border: 1px solid grey;分为三行（border-width，border-color和border-style），正如@Nick在我接受的回复中所建议的那样。

起初我使用tns livesync ios --emulator --watch来立即查看更改。如果未显示更改，我会关闭应用，输入tns run ios并显示更改，但此元素除外。

所以我做了tns platform remove ios，tns plantform add ios，最后是tns run ios。这解决了这个问题。我认为有某种持久性或缓存选择这个特定的元素只是为了惹恼我。