主页 / 问题 / 904010
Accepted
Arthur
Asked:2020-11-08 22:44:21 +0000 UTC2020-11-08 22:44:21 +0000 UTC

确定父级中的子级数

  • 772

有一个您想要应用样式的按钮。

应用于button缩进文本和图标的样式：

display: flex;
justify-content: space-between;

目标：

  • 如果块有 2 个子元素，则对其应用样式。

  • 如果块有 1 个子元素或根本没有子元素，
    请不要相应地应用这些样式

我想做这样一个小小的“手术” CSS。

我的尝试：

* {
  margin: 0;
  padding: 0;
}

html {
  font-size: 62.5%;
}

.button {
  width: auto;
  display: inline-block;
  padding: 1.35rem 1.6rem;
  background-color: hsl(214, 100%, 50%);
  border-radius: 0.3rem;
  white-space: nowrap;
  text-align: center;
  font-size: initial;
  font-family: "RobotoMedium";
  user-select: none;
  cursor: pointer;
  color: #fff;
}

.medium-btn {
  width: 13rem;
}
<div class="button medium-btn" role="button">
  <span class="fw-medium fs-16 c-white">Continue</span>
  <div class="icon button-arrow">
    <svg width="36" height="20" viewBox="0 0 36 20" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none">
    <line x1="4" y1="10" x2="31" y2="10"/>
    <polyline points="26,7 31,10 26,13"/>
  </svg>
  </div>
</div>

javascript

1 个回答

  1. Best Answer

    * {
  margin: 0;
  padding: 0;
}

html {
  font-size: 62.5%;
}

.button {
  width: auto;
  display: inline-block;
  padding: 1.35rem 1.6rem;
  background-color: hsl(214, 100%, 50%);
  border-radius: 0.3rem;
  white-space: nowrap;
  text-align: center;
  font-size: initial;
  font-family: "RobotoMedium";
  user-select: none;
  cursor: pointer;
  color: #fff;
}


.button > *:nth-child(2) {
  display: inline-block;
  padding-left: 20px;
}

.medium-btn {
  width: 13rem;
}
    <div class="button medium-btn" role="button">
  <span class="fw-medium fs-16 c-white">Continue</span>
  <div class="icon button-arrow">
    <svg width="36" height="20" viewBox="0 0 36 20" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none">
    <line x1="4" y1="10" x2="31" y2="10"/>
    <polyline points="26,7 31,10 26,13"/>
  </svg>
  </div>
</div>
<br/>
<div class="button medium-btn" role="button">
  <div class="icon button-arrow">
    <svg width="36" height="20" viewBox="0 0 36 20" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none">
    <line x1="4" y1="10" x2="31" y2="10"/>
    <polyline points="26,7 31,10 26,13"/>
  </svg>
  </div>
</div>

    • 1

相关问题