CSS高级选择器

完成网页里的一个新闻小板块：

设计图：

 

题目要求：尽量使用高级选择器来实现页面效果。

 index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <h3>经济新闻</h3>
    <ul>
        <li>换季衣服堆积如山？有群职业整理师帮你断舍离 <span> 09:13</span></li>
        <li>浙江5G套餐来了 三大运营商今日正式开启办理 <span>11-01 08:36</span></li>
        <li>区块链，价值在哪里——访中国工程院院士、浙江 <span>11-01 08:34</span></li>
        <li>国内首家银行系邮币馆举办专家讲座 揭开熊猫金<span> 11-01 08:13</span></li>
        <li>电信5G正式商用 专业人士教你如何挑选适合的<span> 11-01 07:53</span></li>
    </ul>
    
</body>

</html>

index.css

ul,
li {
  /* 去除li标签前的小圆点 */
  list-style: none;
  /* 清除标签默认的内边距 */
  padding: 0;
}

h3 {
  font-size: 14px;
  font-weight: bold;
  color: #000000;
}

ul > li{
  font-size: 14px;
  color: #000000;
}

ul > li >span{
  font-size: 14px;
  color: #999999;
}

效果：

 

 接下来，完成第二个小板块。

要求如下

 

 index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>练习</title>
</head>

<body>
    <h3>热点排行</h3>
    <ul>
        <li><span class="rank top-three">1</span>校招主持称山大女生漂亮留学生幸福 涉事企业回应<span class="point-number">96844</span></li>
        <li><span class="rank top-three">2</span>合肥"女黑老大"获刑25年:有受害人借900万还71套房<span class="point-number">17556</span></li>
        <li><span class="rank top-three">3</span>女子体检发现"包块" 尚未确诊跳楼身亡<span class="point-number">15283</span></li>
        <li><span class="rank">4</span>到银行没领到20多个鸡蛋 7旬老人被气得脑出血<span class="point-number">7471</span></li>
        <li><span class="rank">5</span>潘石屹要清空在中国的所有核心资产？SOHO中国回应<span class="point-number">6581</span></li>
        <li><span class="rank">6</span>40名大学生因旷课太多被学校退学 教育部回了3个字<span class="point-number">6463</span></li>
        <li><span class="rank">7</span>云南亿万富豪被杀案:家人怀疑买凶杀人弃百万赔偿<span class="point-number">6416</span></li>
        <li><span class="rank">8</span>与父亲争吵怄气 22岁小伙喝百草枯抢救无效死亡<span class="point-number">5723</span></li>
        <li><span class="rank">9</span>司机被黄牛收钱后万元罚款减半 山西祁县:正在调查<span class="point-number">5433</span></li>
        <li><span class="rank">10</span>蒙古国逮捕800名中国人：涉嫌从事电信诈骗活动<span class="point-number">5425</span></li>
    </ul>
</body>

</html>

index.css

ul,
li {
    list-style: none;
    padding: 0;
}

h3 {
    
        font-size: 16px;
        font-weight: bold;
        color: #404040;
      
}

/* 当然，直接写在li里也是可以的 */
ul {
    font-size: 14px;
    color: #404040;
  }
  
  /* 给序号添加样式 */
  ul li .rank {
    font-size: 16px;
    color: #888888;
  }
  
  /* 给前三个序号添加样式 */
  /* 因为样式层叠性的存在，前三个序号会采用这里的样式 */
  ul li .top-three {
    font-size: 26px;
    color: #f34540;
  }

  ul li .point-number{
      color: #404040;
  }

效果：

 

posted @ 2022-01-30 13:06  阿纳先森  阅读(71)  评论(0)    收藏  举报