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

先来看看网上这道题：

需求说明：

“全部歌手”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标签添加样式而导致前面符号和内容都被添加同样的样式！

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

结论：就近原则。

父标签嵌入样式，子标签也会改变，可以通过选中子标签嵌入样式来覆盖自身的父标签样式

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

zz:如何更改列表项前的New标记的天数设置（days-to-show-new-icon ） from Jianyi
如何更改列表项前的New标记的天数设置(days-to-show-new-icon ) 今天群里有人问,查了下资料. 方法很简单:可以采用stsadm设置系统认为列表项是新的天数. 在MOSS服务器上 ...
html无序列表文字换行,ppwjs之bootstrap文字排版：无序列表项不换行
ppwjs欢迎您 //程序开始引入(_sys_bootstrap4_all_addr + ".js",$真); var 标题1 = "以下为有序列表的默认格式和不换行格 ...
关于MOSS列表库新建列表项前的!New标识
当在文档库或者列表内上传新的项目时,系统会自己在新项目的后面或者前面(英文版,中文版服务器位置不同)加上[!New]或者[! 新],如下. 默认的话,新建列表项两天内都会挂着这个标识. 修改默认天数的 ...
css 去掉li 标签列表项前面的点
/* ul里面的列表项 li */ ul>li{/* 去掉li标签列表项前面的点 */list-style: none; }
HTML的有序列表和无序列表
HTML的列表是将内容按照一定的顺序显示在页面中,当然有的时候内容前面有编号,有的时候内容前面没有编号,有编号的称为有序列表,无编号的称为无序列表,分别由标签<ol></ol> ...
HTML 列表标签、有序列表、无序列表、自定义列表dl dt dd
文章目录有序列表无序列表自定义列表(重点) 总结有序列表有序列表即为有排列顺序的列表,其各个列表项会按照-定的顺序排列定义. 在HTML标签中, 标签用于定义有序列表,列表排序以数字来显示, ...
表格标签(合并单元格，列表结构标签thead， tbody，有序列表ol，无序列表dl )
表格用法: < table >< /table >是用于表格的标签. < tr >< /tr>标签用于定义表格中的行,必须嵌套在< table & ...
html项目符号正方形,HTML无序列表| HTML项目符号列表
本文概述 HTML无序列表或项目符号列表以项目符号格式显示元素.我们可以使用无序列表, 而无需按任何特定顺序显示项目. HTML ul标签用于无序列表.项目符号列表可以有4种类型: 碟片圈广场没 ...
html怎么去掉无序列表符号,html无序列表怎么写？无序列表怎么去掉点？（图文）...
在网页中,可以用很多方法来排列文本项目,可以将多种项目没有顺序地排列在一起,也可以给每个项目赋予编号后再进行排列.此时,没有顺序的文本排列方式称为无序列表. 无序列表是项目列表,列表内容可以按任意顺序 ...

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

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

最新文章

热门文章