我正在尝试使用黑色边框定义一组彼此重叠的按钮,为了没有重叠的边框,我想做这样的事情:
.myCustomButton {
border: 1.5px solid black;
}
.myCustomButton:not(:last-child) {
border-bottom: none;
}
我尝试了一些变化而没有成功。我假设(在玩了一些之后)这是因为元素不是“组”,所以没有实际的最后一个孩子。
我尝试过使用“Field Group ID”,但这并没有太大变化。还尝试给“项目”自己的类和使用:最后一个孩子,但也没有工作。
<VBox xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" width="auto" direction="Column" id="vbox0_copy2">
<items class="a">
<Button xmlns="sap.m" text="1" id="flight1" press="onShowFlightDetails" class="myCustomButton" type="Transparent" fieldGroupIds="flightsbuttons"/>
<Button xmlns="sap.m" text="2" id="flight2" press="onShowFlightDetails" class="myCustomButton" type="Transparent" fieldGroupIds="flightsbuttons"/>
<Button xmlns="sap.m" text="3" id="flight3" press="onShowFlightDetails" class="myCustomButton" type="Transparent" fieldGroupIds="flightsbuttons"/>
</items>
</VBox>
据我所知,使用标准HTML和CSS我在HTML文件中定义按钮本身应该可以解决,但据我所知这是你应该怎么做的:
<script>
sap.ui.getCore().attachInit(function() {
new sap.m.Shell({
app: new sap.ui.core.ComponentContainer({
height : "100%",
name : "ExampleScreen2"
})
}).placeAt("content");
});
</script>
所以,一般来说,我只使用一个'.placeAt(“content”)'我错了,或者我错过了另一种使用方式:last-child是否正确?
会发生什么是sapui5为VBox的每个孩子添加一个'div'层。
这意味着生成的html看起来像
<div> <-- VBox
<div> <-- item 1 container
<button />
</div>
<div> <-- item 2 container
<button />
</div>
...
</div>
因此,您的选择器无法定位项目本身上的类集(因为正如您所说,它们不是html树中的兄弟)
要实现你的目标,在VBox上设置一个类,比如'myCustomButtonContainer',然后将你的CSS设置为
.myCustomButtonContainer > .sapMFlexItem {
border: 1.5px solid black;
}
.myCustomButtonContainer > .sapMFlexItem:not(:last-child) {
border-bottom: none;
}