补作业——0704作业

html代码

<div class="box1">
    <ul>
        <li>这是一条公司动态1</li>
        <li>这是一条公司动态2</li>
        <li>这是一条公司动态3</li>
        <li>这是一条公司动态4</li>
        <li>这是一条公司动态5</li>
    </ul>
</div>
<div class="box2">
    <ul>
        <li class="no1">这是一条行业新闻1</li>
        <li>这是一条行业新闻2</li>
        <li>这是一条行业新闻3</li>
        <li>这是一条行业新闻4</li>
        <span>这是一个P标签来倒单的</span>
        <li>这是一条行业新闻5</li>
    </ul>
</div>

css代码

/*群组选择器*/
.box1,.box2{
    margin-left: 20px;
    margin-bottom: 30px;
    margin-top:20px;
    width: 250px;
}
/*子元素选择器*/
ul>li{
    list-style: none;
}
/*子元素选择器奇偶选择*/
.box1 ul>:nth-child(2n){
    background: #ffe03b;
}
/*控制ul的子元素li标签的倒数第三个*/
/*如果不写li就是控制ul的子元素倒数第三个，等同于nth-last-child()*/
.box2 ul>li:nth-last-of-type(3){
    background: #ffaf07;
}
/*具体的子元素演示*/
.box2 ul>:nth-child(1){
    background: #5283ff;
}
/*兄弟元素*/
.no1+li{
    background: #1bff06;
}