Css选择器

1.选中某一个赋给样式

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

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