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

Question

我正在尝试定义一组按钮，这些按钮彼此重叠并带有黑色边框，为了没有重叠的边框，我想做这样的事情：

.myCustomButton {
  border: 1.5px solid black;
}

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

我尝试了一些变体，但没有成功。我假设（在玩弄它之后）这是因为元素不是 "group"，所以没有实际的最后 child.

我尝试过使用 "Field Group Ids"，但变化不大。还尝试给 "items" 自己的 class 并在其上使用 :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>

因此您的选择器无法将 class 设置为项目本身的目标（因为如您所说，它们在 html 树中不是兄弟）

为了实现您的目标，请在 VBox 上设置一个 class，例如 'myCustomButtonContainer'，然后将您的 css 设置为

.myCustomButtonContainer > .sapMFlexItem {
  border: 1.5px solid black;
}

.myCustomButtonContainer > .sapMFlexItem:not(:last-child) {
  border-bottom: none;
}

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

How do you use :last-child without defining the elements on the HTML page?

css

sapui5

sap-web-ide