可以通过jquery来实现，
首先，用hasClass方法判断它是否有这种样式，
接着，如果有，执行冒号前面的语句，
如果没有，执行冒号后面的语句。
具体是以下代码：
$("#id").hasClass("className") ? console.log("Has this class.") : console.log("Do not has this class.")比较靠谱的跨浏览器兼容的解决方法是在css里面写一行样式设置，比如 #cssDetectFoo {width: 1px}，然后 js 创建一个不可见的 div#cssDetectFoo，加载 css，setInterval 去判断这个 div 的高度是否变成 1px实际上 你若看了 图中源码的话 就不会问这样的问题了 因为按你说的效果是可以实现的
但是会增加网站体积 需要JS 来实现这个效果是不划算的
图中实际原理是
原理<ul style="width:200px border-bottom:1px dotted #999 padding:10px margin-top:10px">
<li style="line-height:30px font-weight:bold color:#09F">1内容内容内容内容内容内容</li>
<li style="line-height:30px font-weight:bold color:#09F">2内容内容内容内容内容内容</li>
<li style="line-height:30px font-weight:bold color:#09F">3内容内容内容内容内容内容</li>
<li style="line-height:30px font-weight:bold color:#09F">4内容内容内容内容内容内容</li>
<li style="line-height:30px font-weight:bold color:#09F">5内容内容内容内容内容内容</li>
</ul>
<ul style="width:200px border-bottom:1px dotted #999 padding:10px margin-top:10px">
<li style="line-height:30px font-weight:bold color:#09F">1内容内容内容内容内容内容</li>
<li style="line-height:30px font-weight:bold color:#09F">2内容内容内容内容内容内容</li>
<li style="line-height:30px font-weight:bold color:#09F">3内容内容内容内容内容内容</li>
<li style="line-height:30px font-weight:bold color:#09F">4内容内容内容内容内容内容</li>
<li style="line-height:30px font-weight:bold color:#09F">5内容内容内容内容内容内容</li>
</ul>
<ul style="width:200px border-bottom:1px dotted #999 padding:10px margin-top:10px">
<li style="line-height:30px font-weight:bold color:#09F">1内容内容内容内容内容内容</li>
<li style="line-height:30px font-weight:bold color:#09F">2内容内容内容内容内容内容</li>
<li style="line-height:30px font-weight:bold color:#09F">3内容内容内容内容内容内容</li>
<li style="line-height:30px font-weight:bold color:#09F">4内容内容内容内容内容内容</li>
<li style="line-height:30px font-weight:bold color:#09F">5内容内容内容内容内容内容</li>
</ul>
<ul style="width:200px border-bottom:1px dotted #999 padding:10px margin-top:10px">
<li style="line-height:30px font-weight:bold color:#09F">1内容内容内容内容内容内容</li>
<li style="line-height:30px font-weight:bold color:#09F">2内容内容内容内容内容内容</li>
<li style="line-height:30px font-weight:bold color:#09F">3内容内容内容内容内容内容</li>
<li style="line-height:30px font-weight:bold color:#09F">4内容内容内容内容内容内容</li>
<li style="line-height:30px font-weight:bold color:#09F">5内容内容内容内容内容内容</li>
</ul>
<ul style="width:200px border-bottom:1px dotted #999 padding:10px margin-top:10px">
<li style="line-height:30px font-weight:bold color:#09F">1内容内容内容内容内容内容</li>
<li style="line-height:30px font-weight:bold color:#09F">2内容内容内容内容内容内容</li>
<li style="line-height:30px font-weight:bold color:#09F">3内容内容内容内容内容内容</li>
<li style="line-height:30px font-weight:bold color:#09F">4内容内容内容内容内容内容</li>
<li style="line-height:30px font-weight:bold color:#09F">5内容内容内容内容内容内容</li>
</ul>
方案一
<php>
循环
<ul style="width:200px border-bottom:1px dotted #999 padding:10px margin-top:10px">
子循环
<li ｛如果 i=1 or id=6 or i=11 ... 看你需要来进行判断每个UL 第一个li 如果是第一个就加粗｝style="line-height:30px font-weight:bold color:#09F"｛else｝style="line-height:30px font-weight:bold color:#09F"｛end｝>1内容内容内容内容内容内容</li>
子循环结束
</ul>
循环结束
<php>
方案二
<php>
循环
｛如果 i=1 or id=6 or i=11 ... 看你需要来进行判断UL 需不需要显示｝
<ul style="width:200px border-bottom:1px dotted #999 padding:10px margin-top:10px">｛end｝
<li ｛如果 i=1 or id=6 or i=11 ... 看你需要来进行判断每个UL 第一个li 如果是第一个就加粗｝style="line-height:30px font-weight:bold color:#09F"｛else｝style="line-height:30px font-weight:bold color:#09F"｛end｝>1内容内容内容内容内容内容</li>
｛如果 i=5 or id=10 or i=115 ... 看你需要来进行判断 /UL 需不需要显示｝</ul>｛end｝
循环结束
<php>
因为不知道你用什么语言来写 所以我大概的写个样子 你看懂这个流程就可以了
