Question

我正在尝试选择以下元素

CSS中的

<button name="1" id="1" class="btn1 ui-btn ui-shadow ui-corner-all"></button>，但它无法正常工作。这种方式是否可能，或者我应该用保守的方式制作点？

代码段

＆＃13;

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

＆＃13;

<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>

＆＃13;

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：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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;
}

使用nth-child在css中选择元素

3 个答案: