英文:
How to reference the "second-child" and "third-child" on css?
问题
我不知道如何引用 CSS 中的第二个和第三个子元素。
我尝试更改第一个和第二个子元素，但不起作用。
我只能引用第一个和最后一个子元素
keypad :first-child :nth-child(1){
background-color: black;
}
keypad :last-child :nth-child(3){
background-color: #b22222;
}
英文:
I don't know how to reference the second and third child on css.
I tried change the first per second and third but don't work.
I only can reference the first and last-child
keypad :first-child :nth-child(1){
background-color: black;
}
keypad :last-child :nth-child(3){
background-color: #b22222;
}
答案1
得分: 1
.keypad:nth-child(2) 的中文翻译是：从父元素引用特定子元素，可以这样做。
英文:
To refer to a specific child from a parent element, do it like this
.keypad:nth-child(2)
答案2
得分: 0
首先，在您的 CSS 中，如果 keypad 是一个类名，则应该设置 .，如果它是一个 ID，则应该使用 #。然后使用 :nth-child 来引用子元素的顺序：
.keypad:nth-child(2) {
background-color: black;
}
.keypad:nth-child(3) {
background-color: #b22222;
}
在 HTML 中，您可以这样使用：
<div class="container">
<div class="keypad">1</div>
<div class="keypad">2</div>
<div class="keypad">3</div>
<div class="keypad">4</div>
<div class="keypad">5</div>
<div class="keypad">6</div>
<div class="keypad">7</div>
<div class="keypad">8</div>
</div>
英文:
First, in your css you should set . if keypad is the name of a class or # if it is an id. Then use :nth-child to refer the order of a child:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.keypad:nth-child(2){
background-color: black;
}
.keypad:nth-child(3){
background-color: #b22222;
}
<!-- language: lang-html -->
<div class="container">
<div class="keypad">1</div>
<div class="keypad">2</div>
<div class="keypad">3</div>
<div class="keypad">4</div>
<div class="keypad">5</div>
<div class="keypad">6</div>
<div class="keypad">7</div>
<div class="keypad">8</div>
</div>
<!-- end snippet -->
答案3
得分: 0
你在调用CSS元素时没有使用class(.)或Id标识符(#)，请使用以下方式：
对于类选择器，请使用：
.keypad:nth-child(2){....}
对于Id选择器，请使用：
#keypad:nth-child(2){....}
英文:
you have not used the class(.) or Id identifier(#) when calling the CSS element use :
.keypad:nth-child(2){....}
for class selectors and
#keypad:nth-child(2){....}
for Id selectors
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论