给有序,无序列表项前的符号添加样式
列表 添加 样式 符号 无序 有序
2023-06-13 09:13:11 时间
先来看看网上这道题: 需求说明: “全部歌手”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标签添加样式而导致前面符号和内容都被添加同样的样式!
这是通过有序列表完成的运行结果:
结论:就近原则。 父标签嵌入样式,子标签也会改变,可以通过选中子标签嵌入样式来覆盖自身的父标签样式
相关文章
- Python 编程 | 连载 07 - 列表与元组操作
- ScrollRect & LayoutGroup & Content Size Fitter & Mask使用滑动列表的几项要点
- QQ好友界面_qq怎么群发消息给好友列表
- 【说站】python列表添加和删除的方法
- dropdownlist添加列表项_云痕大数据绑定怎么删
- 我有两个列表,现在需要找出两个列表中的不同元素,怎么做?
- Typecho调用分类列表并隐藏多个分类方法
- 为自己的博客添加追番列表
- 【Java AWT 图形界面编程】菜单组件 ① ( 菜单相关组件简介 | 菜单组件使用步骤 | 菜单列表中添加分割线 | 设置 MenuItem 菜单项快捷键 )
- WordPress 技巧:后台文章列表添加排序选项
- Java List.addAll()方法:添加所有元素到列表中
- 使用Linux ls 1查看文件列表(linuxls-1)
- [清单] Windows 11 Dev Build 22000.100版已修复问题和已知问题列表
- Raspbian 国内软件源列表
- 操作Linux 列表操作:值得掌握的技巧(linux列表)
- 使用 Bash 脚本发送包含几天内到期的用户账号列表的电子邮件
- 的处理处理Linux参数列表过长的有效方法(linux参数列表过长)
- 监控列表Redis,开启数据安全之旅(监控列表redis)
- Oracle数据库列表主键标识UUID 实现方式(oracle主键uuid)
- 设计Redis实现文章列表功能(redis设计文章列表)
- ADSI+ASP添加IP到IIS禁止访问列表中
- PHP获取MSN好友列表的代码(2009-05-14测试通过)
- 加载列表时jquery获取ul中第一个li的属性