给有序，无序列表项前的符号添加样式

用户10786862

发布于 2023-10-18 17:55:03

2050

发布于 2023-10-18 17:55:03

文章被收录于专栏：CSDN搬迁文章

先来看看网上这道题： 需求说明： “全部歌手”18px楷体，歌手名称段落设置字体类型为Times New Roman,Times,宋体。字体大小12px,行高20px。歌手分类字母用<span>标签，并使用font-weight设置字体加粗，红色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度音乐标签</title>
  <style>
    h1{
      font-size: 18px;
      font-family: 楷体;
    }
    p{
      font-family: Times New Roman, Times, 宋体;
      font-size: 12px;
      line-height: 20px;
    }
    span{
      font-weight: bold;
      color: red;
    }
  </style>
</head>
<body>
<h1>全部歌手</h1>
    <p><span>A </span>A Fine Frenzy Air Supply Akon Alan Silvestri Apink 安又琪 安在旭 安市奈美惠</p>
    <p><span>B </span>Babyface Backstreet.. Bandan Barbra Streisand Basshunter Bee Gees 北京天使合唱团 宝儿 宝宝的音乐花园 巴哈尔古丽</p>
    <p><span>C </span>Chris Gameau Chistina Aguilera Christina Perri 草原兄弟 蔡卓妍 蔡国庆 陈雅森 陈雷 陈韵若</p>
    <p><span>D </span>Darby Devon Darren Hayes David Archuleta Dido 东城卫 东方传奇 刀郎 刁寒 动力火车 邓丽欣</p>
    <p><span>E </span>Emmylou Harris Enigma Ennio Morricone Eric Clapton 二手玫瑰 二胡 额尔古纳乐队</p>
    <p><span>F </span>Fergie Finger eleven Flo Rida Florence+The M.. 付笛声 付辛博 佛牙组合 凤凰传奇 飞儿乐队</p>
    <p><span>G </span>Gretchen Wilson Greyson Chance Coverage 关牧村 关菊英 古天乐 古巨基 龚琳娜 龚诗嘉</p>
    <p><span>H </span>High School Music.. Hilary Duff >Hit-5 Hollywood Undead Hope组合 胡松华 胡歌 黄宗泽 黄家驹 黄晓明 黑鸦子 黑龙</p>
    <p><span>I </span>I Me IU Icona Pop Il Divo Imagine Dragons Infinite Ingrid Michaelson Isgaard</p>
    <p><span>J </span>Janet Jackson Jason Chen Jason Derulo Jason Mraz Jason Wade 吉杰 吉田亚纪子 蒋大为 蒋蒋 蒋雪儿 解小东 酒井法子</p>
</ol>
</body>
</html>

按照题目要求实现就是这样。

一看到像A,B,C,D或1，2，3等这样的列表项就想到了有序列表或无序列表。所以，就试试用有序列表完成这个要求。

但是，当你按照要求向有序列表嵌入样式时，比如：题目要求(歌手分类字母用<span>标签，并使用font-weight设置字体加粗，红色)。这是span我们已经采用有序列表的方式了！再对每个列表项前的符号设置字体加粗，红色时，你会发现列表内容也跟着变成红色并加粗了！

下面是我的猜想实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度音乐标签页面</title>
  <style>
    h1{
      font-size: 18px;
      font-family: "楷体";
    }
    p{
      font-family: Times New Roman,Times,宋体;
      font-size: 12px;
      line-height: 20px;
      color: black;
      /*font-weight: normal;*/
    }
    ol{
      color: red;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <h1>全部歌手</h1>
  <ol type="A">
    <li>
      <p>A Fine Frenzy Air Supply Akon Alan Silvestri Apink 安又琪 安在旭 安市奈美惠</p>
    </li>
    <li>
      <p>Babyface Backstreet.. Bandan Barbra Streisand Basshunter Bee Gees 北京天使合唱团 宝儿 宝宝的音乐花园 巴哈尔古丽</p>
    </li>
    <li>
      <p>Chris Gameau Chistina Aguilera Christina Perri 草原兄弟 蔡卓妍 蔡国庆 陈雅森 陈雷 陈韵若</p>
    </li>
    <li>
      <p>Darby Devon Darren Hayes David Archuleta Dido 东城卫 东方传奇 刀郎 刁寒 动力火车 邓丽欣</p>
    </li>
    <li>
      <p>Emmylou Harris Enigma Ennio Morricone Eric Clapton 二手玫瑰 二胡 额尔古纳乐队</p>
    </li>
    <li>
      <p>Fergie Finger eleven Flo Rida Florence+The M.. 付笛声 付辛博 佛牙组合 凤凰传奇 飞儿乐队</p>
    </li>
    <li>
      <p>Gretchen Wilson Greyson Chance Coverage 关牧村 关菊英 古天乐 古巨基 龚琳娜 龚诗嘉</p>
    </li>
    <li>
      <p>High School Music.. Hilary Duff >Hit-5 Hollywood Undead Hope组合 胡松华 胡歌 黄宗泽 黄家驹 黄晓明 黑鸦子 黑龙</p>
    </li>
    <li>
      <p>I Me IU Icona Pop Il Divo Imagine Dragons Infinite Ingrid Michaelson Isgaard</p>
    </li>
    <li>
      <p>Janet Jackson Jason Chen Jason Derulo Jason Mraz Jason Wade 吉杰 吉田亚纪子 蒋大为 蒋蒋 蒋雪儿 解小东 酒井法子</p>
    </li>
  </ol>
</body>
</html>

原先是直接在li标签中写内容的。我这是在每个列表项中给内容加上了一个p标签，这样就可以选中p标签嵌入内容样式。不需要选中li标签添加样式而导致前面符号和内容都被添加同样的样式！

这是通过有序列表完成的运行结果：