仅在文本中更改 UL LI 项目符号 - Wordpress - CSS答案

【问题标题】：Change UL LI bullet points only in text - Wordpress - CSS仅在文本中更改 UL LI 项目符号 - Wordpress - CSS
【发布时间】：2019-05-18 02:35:02
【问题描述】：

我想更改文章和页面文本中项目符号的样式，因此我使用以下 CSS 样式完成了该操作：

/* Remove the old bullet points */
ul li { 
  list-style: none;
}
/* Now replace with the new one */
ul li::before {
  color: red;  
  content: "\2022"; 
  font-size: 1.4em; 
  padding-right: 0.5em; 
  position: relative;
  top: 0em; 
}

这行得通，但现在它变得非常疯狂，并在页面上的每个 ul li 标记前面添加了项目符号。

我知道我可以从中排除 id 和类，例如 ul:not(.class) li:not(.class)::before

但我的列表排除现在正在增加，无论如何我很可能会错过某个地方。

那么有没有其他方法可以做到这一点？

我知道我可以手动将类添加到我想要新项目符号的 ul li 标记中，但我试图避免手动执行此操作。

我基本上想更改默认的项目符号样式，但仅限于帖子和页面内容中的项目符号。

还有其他方法吗？

【问题讨论】：

@JAK 答案是对的 .. 但是如果您自己无法获得选择器，您可以提供相关的 HTML 代码，让我们为您推荐一个选择器..

标签： html wordpress css css-selectors

【解决方案1】：

听起来你最好有一个类来包装你希望发生这种变化的网站区域。例如：

.post ul li { 
  list-style: none;
}

.post ul li::before {
  color: red;  
  content: "\2022"; 
  font-size: 1.4em; 
  padding-right: 0.5em; 
  position: relative;
  top: 0em; 
}

您可以通过以下方式将不同的类链接在一起：

.post ul li,
.page ul li { 
  list-style: none;
}

.post ul li::before,
.page ul li::before {
  color: red;  
  content: "\2022"; 
  font-size: 1.4em; 
  padding-right: 0.5em; 
  position: relative;
  top: 0em; 
}

或者也许创建一个专门针对您要更改的列表的规则。

【讨论】：

嘿@JAK，是的，我试过了，不幸的是，似乎每个帖子或页面都使用完全相同的类，即 .entry-content
我会看看我是否只能在帖子模板中添加其他类..
那么澄清一下；您只想针对某种类型的帖子中的项目符号？您将需要找到一些方法来定义您想要进行此更改的站点的那些部分。通过在 HTML 中添加新类或使用更复杂的选择器。
嗨，是的，正确，我刚刚在要更改项目符号的帖子的模板中添加了一个选择器。它实际上按照我现在想要的方式工作。
很高兴听到这个消息！值得注意的是，无序列表可以在网页中扮演很多不同的角色，因此应该谨慎地确定对它们的 CSS 更改范围。只要确保父选择器不是太宽泛就可以了。 :)

【解决方案2】：

enter image description here WordPress 支持在帖子和页面中创建有序（编号）和无序（要点）列表。标准的帖子/页面编辑器有助于轻松创建列表 - 只需键入列表的内容（每行一个条目），然后突出显示条目并单击相应的按钮以格式化为列表。

【讨论】：