liang14658fox

Appearance

选择指定样式的第N个子元素 ​

css
tr :nth-child(2){
    text-align:center;
}

tr :nth-child(1){
    padding-left:20px
}
tr :nth-child(2){
    text-align:center;
}

tr :nth-child(1){
    padding-left:20px
}

效果 ​

html
<div class="box">
  0
  <div>1</div>
  <div>2</div>
  <div>3
  <div>3.1</div>
  <div>3.1</div>
  </div>
</div>
<div class="box">
  0
  <div>1</div>
  <div>2</div>
  <div>3
  <div>3.1</div>
  <div>3.1</div>
  </div>
</div>
css
div {
  border: 2px solid #9c9c9c;
  margin: 5px;
  padding: 5px;
  box-sizing: border-box;
  font-size: 20px;
  font-weight: 600;
  color: aliceblue;
}

.box {
  background-color: red;
}

.box>div:nth-child(1) {
  background-color: blueviolet;
}

.box>div:nth-child(2) {
  background-color: yellowgreen;
}

.box>div:nth-child(3) {
  background-color: black;
}

.box>div:nth-child(3)>div:nth-child(1) {
  background-color: blue;
}

.box>div:nth-child(3)>div:nth-child(2) {
background-color: #9c9c9c;
}
div {
  border: 2px solid #9c9c9c;
  margin: 5px;
  padding: 5px;
  box-sizing: border-box;
  font-size: 20px;
  font-weight: 600;
  color: aliceblue;
}

.box {
  background-color: red;
}

.box>div:nth-child(1) {
  background-color: blueviolet;
}

.box>div:nth-child(2) {
  background-color: yellowgreen;
}

.box>div:nth-child(3) {
  background-color: black;
}

.box>div:nth-child(3)>div:nth-child(1) {
  background-color: blue;
}

.box>div:nth-child(3)>div:nth-child(2) {
background-color: #9c9c9c;
}