Question

我试图定义一组按钮，这些按钮彼此重叠，并带有黑色边框，并且为了没有重叠的边框，我想执行以下操作：

.myCustomButton {
  border: 1.5px solid black;
}

.myCustomButton:not(:last-child) {
  border-bottom: none;
}

我尝试了一些变体，但没有成功。我认为（经过一番尝试之后），这是因为元素不是“组”，所以没有实际的最后一个孩子。

我尝试使用“字段组ID”，但并没有太大变化。还尝试给“项目”提供自己的类，并在其上使用：last-child，但这也不起作用。

<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的方法吗？

Answer 1

发生的事情是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;
}

如何使用：last-child而不定义HTML页面上的元素？

1 个答案: