Html 修复一些CSS的OL和链接颜色

我正在尝试更新这段代码，以获得有序列表，并在右div中显示类似方框的数字（对于元素2和4）

此外，我想知道是否有可能在活动链接下获得一个彩色框，该框在选择其他链接之前保持彩色

那我该怎么做呢

Thx很多

*{font-family:'Segoe-UI'；边距：0；填充：0；}
h3{字体大小：600；边距：0 10px；}
.colsa.cola-12{宽度：50%；浮动：左；}
ol li{列表样式类型：decimal；}
ol li，ol li a{显示：块；线高度：40px；}
ol li a{填充：5px20px 10px；文本装饰：无；}
ol li a:悬停a:活动{背景色：#ccf；}
.itema{display:none；}
.itema:target{display:block；}
.下载ok.fiche特别是titrecroch{
显示：块；
字体大小：16px；
宽度：100%；
}
菲希，尤其是提特雷克{
显示：块；
字体大小：16px；
宽度：100%；
利润率：0.10px；
}
h2、h3、.侧边栏全部.widget标题.titRecoch{
字体大小：20px；
}
.小{
字体大小：16px；}
蒂特雷科赫先生{
颜色：#000！重要；
字体大小：粗体；
}
.itema h2:：before、h3:：before、.sidebar all.widget title:：before、.titrecroch:：before{
颜色：#fcc200；
内容：“[”；
字体系列：“ralewaylight”；
字体大小：31px；
字体大小：正常；
右边填充：8px；
垂直对齐：中间对齐；
}
.itema h2:：after、h3:：after、.sidebar all.widget title:：after、.titrecroch:：after{
颜色：#fcc200；
内容：“]”；
字体系列：“ralewaylight”；
字体大小：31px；
字体大小：正常；
左侧填充：8px；
垂直对齐：中间对齐；
}
.ffpmap.titrecroch{
显示：块；
边缘底部：16px；
}
.flipbook.titrecroch.formpedago.titrecroch.galleriepedago.titrecroch{
显示：块；
边缘底部：20px；
}
橙色：以前{
背景：#eb5d0b无重复滚动0；
边界半径：2px；
颜色：#fff；
内容：“>”；
字体系列：“ralewaylight”；
右边距：10px；
填充：7px 10px；
}
.vert：：之前{
背景：#88a137无重复滚动0；
边界半径：2px；
颜色：#fff；
内容：“>”；
字体系列：“ralewaylight”；
右边距：10px；
填充：6px 9px；
}
*，*：：之前，*：：之后{
框大小：继承；
}
.可乐-12便士{
边框底部：1px实心#eaeaea；
颜色：#000；
显示：块；
填充：10px0；
文字装饰：无；
转换：所有的0.1从0变为0；
左边距：2米；
文本缩进：-2em；
}
.bs{
字号：900；
文字装饰：下划线；
}

右标题
结果-步骤1文本1
结果-步骤2一般文本
文本2.1

文本2.2

文本2.3

结果-步骤3第3段第1段
第3段第2段
结果-步骤4
工程指令1：标题4.1文本4.1

工程指令2：标题4.2文本4.2

工程指令3：标题4.3文本4.3

工程指令4：标题4.4文本4.4

工程指令5：标题4.5文本4.5

工程指令6：标题4.6文本4.6

工程指令7：标题4.7文本4.7

工程指令8：标题4.8文本4.8

工程指令9：标题4.9文本4.9

工程指令10：标题4.10文本4.10

工程指令11：标题4.11文本4.11

结果-步骤5
结果-步骤6文本6
结果-步骤7

对于您的第一个问题（注意，不建议在同一篇文章中出现多个问题），CSS计数器可以做到这一点

注意：您当前的HTML无效

ol

和

ul

只能将

li

作为直接子项

ol{
列表样式：无；
背景：黑色；
保证金：0；
}
李{
计数器增量：我的可怕计数器；
}
李：以前{
内容：“[“计数器（我最棒的计数器）””；
右侧填充：1em；
颜色：金色；
}
a{
颜色：白色；
文字装饰：无；
}

尝试以下简单代码，仅对活动链接使用jquery：

$（“ol li”）。单击（函数（事件）{
event.preventDefault（）；
如果（$（“.active”）.length）{
$（“ol li”）.removeClass（“活动”）；
$（此）.addClass（“活动”）；
}
否则{
$（此）.addClass（“活动”）；
}
});
*{font-family:'Segoe-UI'；边距：0；填充：0；}
h3{字体大小：600；边距：0 10px；}
.colsa.cola-12{宽度：50%；浮动：左；}
ol li{列表样式类型：decimal；}
ol li，ol li a{显示：块；线高度：40px；}
ol li a{填充：5px20px 10px；文本装饰：无；}
ol li a:悬停a:活动{背景色：#ccf；}
.itema{display:none；}
.itema:target{display:block；}
.下载ok.fiche特别是titrecroch{
显示：块；
字体大小：16px；
宽度：100%；
}
菲希，尤其是提特雷克{
显示：块；
字体大小：16px；
宽度：100%；
利润率：0.10px；
}
h2、h3、.侧边栏全部.widget标题.titRecoch{
字体大小：20px；
}
.小{
字体大小：16px；}
蒂特雷科赫先生{
颜色：#000！重要；
字体大小：粗体；
}
.itema h2:：before、h3:：before、.sidebar all.widget title:：before、.titrecroch:：before{
颜色：#fcc200；
内容：“[”；
字体系列：“ralewaylight”；
字体大小：31px；
字体大小：正常；
右边填充：8px；
垂直对齐：中间对齐；
}
.itema h2:：after、h3:：after、.sidebar all.widget title:：after、.titrecroch:：after{
颜色：#fcc200；
内容：“]”；
字体系列：“ralewaylight”；
字体大小：31px；
字体大小：正常；
左侧填充：8px；
垂直对齐：中间对齐；
}
.ffpmap.titrecroch{
显示：块；
边缘底部：16px；
}
.flipbook.titrecroch.formpedago.titrecroch.galleriepedago.titrecroch{
显示：块；
边缘底部：20px；
}
橙色：以前{
背景：#eb5d0b无重复滚动0；
边界半径：2px；
颜色：#fff；
内容：“>”；
字体系列：“ralewaylight”；
右边距：10px；
填充：7px 10px；
}
.vert：：之前{
背景：#88a137无重复滚动0；
边界半径：2px；
颜色：#fff；
内容：“>”；
字体系列：“ralewaylight”；
右边距：10px；
填充：6px 9px；
}
*，*：：之前，*：：之后{
框大小：继承；
}
.