与第n个孩子

Question

CSS选择元素我想选择以下元素

在CSS <button name="1" id="1" class="btn1 ui-btn ui-shadow ui-corner-all"></button>，但它不会工作。这是可能的，或者我应该用带点的保守方式来实现吗？

代码片断

@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

尝试：

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

Answer 3

您可以选择通过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>