CSS高级选择器

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

设计图：

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

index.html

DOCTYPE html>
<html lang="en">

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

<body>
    <h3>经济新闻h3>
    <ul>
        <li>换季衣服堆积如山？有群职业整理师帮你断舍离 <span> 09:13span>li>
        <li>浙江5G套餐来了 三大运营商今日正式开启办理 <span>11-01 08:36span>li>
        <li>区块链，价值在哪里——访中国工程院院士、浙江 <span>11-01 08:34span>li>
        <li>国内首家银行系邮币馆举办专家讲座 揭开熊猫金<span> 11-01 08:13span>li>
        <li>电信5G正式商用 专业人士教你如何挑选适合的<span> 11-01 07:53span>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">1span>校招主持称山大女生漂亮留学生幸福 涉事企业回应<span class="point-number">96844span>li>
        <li><span class="rank top-three">2span>合肥"女黑老大"获刑25年:有受害人借900万还71套房<span class="point-number">17556span>li>
        <li><span class="rank top-three">3span>女子体检发现"包块" 尚未确诊跳楼身亡<span class="point-number">15283span>li>
        <li><span class="rank">4span>到银行没领到20多个鸡蛋 7旬老人被气得脑出血<span class="point-number">7471span>li>
        <li><span class="rank">5span>潘石屹要清空在中国的所有核心资产？SOHO中国回应<span class="point-number">6581span>li>
        <li><span class="rank">6span>40名大学生因旷课太多被学校退学 教育部回了3个字<span class="point-number">6463span>li>
        <li><span class="rank">7span>云南亿万富豪被杀案:家人怀疑买凶杀人弃百万赔偿<span class="point-number">6416span>li>
        <li><span class="rank">8span>与父亲争吵怄气 22岁小伙喝百草枯抢救无效死亡<span class="point-number">5723span>li>
        <li><span class="rank">9span>司机被黄牛收钱后万元罚款减半 山西祁县:正在调查<span class="point-number">5433span>li>
        <li><span class="rank">10span>蒙古国逮捕800名中国人：涉嫌从事电信诈骗活动<span class="point-number">5425span>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;
  }

效果：

Web前端语言学习

CSS高级选择器

相关

标签