你如何使用:last-child而没有在HTML页面上定义元素?

问题描述 投票:2回答:1

我正在尝试使用黑色边框定义一组彼此重叠的按钮,为了没有重叠的边框,我想做这样的事情:

.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是否正确?

css sapui5 sap-web-ide
1个回答
3
投票

会发生什么是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;
}
© www.soinside.com 2019 - 2024. All rights reserved.