Question

我已经为ul标记添加了样式，以便子弹点的颜色不同。这个问题是它也改变了li内容的颜色，而我只打算改变子弹点颜色。

我尝试使用pseudo样式，但效果不佳。

由于我使用的是WordPress，li将位于内容编辑器中，因此如果li标记中的所有内容都包含在span中，那么这将是理想的，以便我可以过滤从其中的内容中找出li的样式。

我知道这可以通过preg_replace实现，但我对PhP一般来说还是新手。

这是我想要实现的一个例子：

<ul>
 <li>
  // Wordpress Add <span> Here
    Content Goes Here
  // Wordpress Add </span> Here
 </li>
</ul>

最终是否可以使用后端函数和过滤器自动包装li内的内容，而不是让用户在WordPress内容编辑器中手动添加内容？

我希望这对你有意义，我尽我所能。

根据要求提供的CSS

ul {
 color: #2e6c9e;
 padding-left: 22px;
}

ul li {
 color: #636466; // This does not work :(
}

注意：

我需要替代:before和:after

对于那些不清楚的人，我通过WordPress内容编辑器添加ul元素。由于这需要用户友好，我需要一种方法在li内容之前插入span，以便没有技术知识的用户可以在没有颜色冲突的情况下插入ul。< / p>

Answer 1

我认为你不能在<li>中为子弹上色。因此，您必须制作自己的子弹，并且可以使用CSS轻松完成。

以下是我经常使用的一个示例：

li {
    position: relative;
    list-style: none;
}
li:before {
    position: absolute;
        top: -3px;
        left: -18px;
    content: "• ";
    font-size: 1.2em;
    color: #222;
}

Answer 2

试试这个HTML：

<ul>
   <li>
     <span>
        test
     </span>
   </li>
</ul>

使用这个CSS：

ul  {
        color: red;
        padding-left: 22px;
    }
ul span
    {
        color: green; 
    }

它对我有用。如果它不起作用，那么可能会有其他CSS应用于您的代码，在这种情况下添加！对您的样式很重要。样式化类而不是元素也可以改善您的代码。

WordPress：用跨度包裹li内容

2 个答案: