标签: 自定义 - 潘绳杰的技术博客

2017-02-20发表前端开发1 分钟读完 (大约193个字)

自定义li的css样式

li的默认样式有几种，我们想要自定义li的样式，例如定义颜色或者显示的图标，以下是操作的两种方法。

方法一：

修改的原理，取消list默认的style，并通过伪元素before来设置新的样式。

ul {list-style: none}

li::before {
  content: "•"; color: red;
  display: inline-block; width: 1em;
  margin-left: -1em
}

特殊符号的一些输入可使用Unicode编码：• = “\2022”, ◦ = \25E6” and ▪ = “\25AA”

方法二：

修改的原理，通过自定义的class来区分标点和文字的颜色。

.listStyle {
  color: red;
}

.listStyle p {
  color: black;
}

<ul class="listStyle">
  <li>
    <p><strong>View :</strong> blah blah.</p>
  </li>
  <li>
    <p><strong>View :</strong> blah blah.</p>
  </li>
</ul>

参考：