使用第 n 个子元素在 css 中选择元素

Question

我正在尝试选择下面的元素

<button name="1" id="1" class="btn1 ui-btn ui-shadow ui-corner-all"></button> 在 CSS 中，但它不起作用。这种方式有可能还是我应该用点的保守方式来实现？

代码 sn-p

@keyframes example {
  100% {
    background-color: grey;
  }
}
div > button:nth-child(1) {
  animation-name: example;
  animation-duration: 1s;
  animation-delay: 1s;
}

<div class="ui-page ui-page-theme-a ui-page-active" data-theme="a" data-role="page" data-url="/soc/gamescreen.php" tabindex="0" style="min-height: 499px;">
  <div class="ui-grid-a">
    <div class="ui-block-a">
      <button name="1" id="1" class="btn1 ui-btn ui-shadow ui-corner-all"></button>
    </div>
    <div class="ui-block-b">
      <button name="2" id="2" class="btn2 ui-btn ui-shadow ui-corner-all"></button>
    </div>
  </div>
  <div class="ui-grid-a">
    <div class="ui-block-a">
      <button name="3" id="3" class="btn3 ui-btn ui-shadow ui-corner-all"></button>
    </div>
    <div class="ui-block-b">
      <button name="4" id="4" class="btn4 ui-btn ui-shadow ui-corner-all"></button>
    </div>
  </div>
</div>

Answer 1

您当前的代码div > button:nth-child(1) 将选择所有按钮，因为它们是各自父元素的第一个子元素。

我不知道为什么你不能使用 ID 元素（通过使用 \3 转义数字字符）来选择你的元素，但如果你想选择 :nth-child，你可以尝试如下.

@keyframes example {
  100% {
    background-color: grey;
  }
}

/* Select the first grid a and then select the button under block a */

.ui-grid-a:first-child .ui-block-a > button { 
  animation-name: example;
  animation-duration: 1s;
  animation-delay: 1s;
}

<div class="ui-page ui-page-theme-a ui-page-active" data-theme="a" data-role="page" data-url="/soc/gamescreen.php" tabindex="0" style="min-height: 499px;">
  <div class="ui-grid-a">
    <div class="ui-block-a">
      <button name="1" id="1" class="btn1 ui-btn ui-shadow ui-corner-all"></button>
    </div>
    <div class="ui-block-b">
      <button name="2" id="2" class="btn2 ui-btn ui-shadow ui-corner-all"></button>
    </div>
  </div>
  <div class="ui-grid-a">
    <div class="ui-block-a">
      <button name="3" id="3" class="btn3 ui-btn ui-shadow ui-corner-all"></button>
    </div>
    <div class="ui-block-b">
      <button name="4" id="4" class="btn4 ui-btn ui-shadow ui-corner-all"></button>
    </div>
  </div>
</div>

Answer 2

您也可以通过 id 选择按钮；但你需要escape the selector:

button {
  background-color: gray;
  width: 4em;
  height: 1em;
}
button#\31 {
  background-color: red;
}
button#\000032 {
  background-color: green;
}

<div class="ui-page ui-page-theme-a ui-page-active" data-theme="a" data-role="page" data-url="/soc/gamescreen.php" tabindex="0" style="min-height: 499px;">
  <div class="ui-grid-a">
    <div class="ui-block-a">
      <button name="1" id="1" class="btn1 ui-btn ui-shadow ui-corner-all"></button>
    </div>
    <div class="ui-block-b">
      <button name="2" id="2" class="btn2 ui-btn ui-shadow ui-corner-all"></button>
    </div>
  </div>
  <div class="ui-grid-a">
    <div class="ui-block-a">
      <button name="3" id="3" class="btn3 ui-btn ui-shadow ui-corner-all"></button>
    </div>
    <div class="ui-block-b">
      <button name="4" id="4" class="btn4 ui-btn ui-shadow ui-corner-all"></button>
    </div>
  </div>
</div>

Answer 3

试试：

.ui-grid-a:first-child div:first-child > button { 
  animation-name: example;
  animation-duration: 1s;
  animation-delay: 1s;
}

但我想知道你为什么不按 id 选择它。您已经为其分配了一个 ID，只需重命名一个 ID，而无需仅使用数字：

<button name="1" id="btn1" class="btn1 ui-btn ui-shadow ui-corner-all"></button>

然后，它应该很简单：

#btn1 {
   animation-name: example;
   animation-duration: 1s;
   animation-delay: 1s;
}