适用于所有不同 UL 用途的 CSS 样式答案

【问题标题】：CSS styles for all the different UL uses适用于所有不同 UL 用途的 CSS 样式
【发布时间】：2015-08-28 12:29:04
【问题描述】：

ul 标签非常通用，我一直在努力解决这个问题。

最初，我为ul 和li 标签定义了一个基本样式规则，用于处理所见即所得文本的通用文本块中的项目符号。我正在使用 BEM，所以我想我只需向任何具有不同角色的 ul 添加一个类（比如说一个菜单，或者一个新闻缩略图列表等）

问题是我并不总是能够控制标记；我目前的问题是一个分页插件，它使用ul/li 结构，但不允许我向ul 添加类。

我正在使用 BEM，所以我真的不想使用后代选择器，尤其是元素选择器，但我意识到当我无法访问 ul/li 标记时，我可能需要这样做。

任何建议都将不胜感激 - 特别是在基本/休息规则方面，因为我在很多网站上都有 ul/li 列表，并且一劳永逸地想要掌握这个问题。

谢谢

【问题讨论】：

您的实际问题是什么？您可以使用 BEM 后面的类名来设置每个 <ul> 的样式。当您无法将类附加到页面的某些元素时，您只能使用后代选择器。唯一的选择是通过 javscript 附加类，非常严格。
对不起，我知道这很啰嗦，但我的问题是最后一段。 js 不是一个可行的解决方案。如何仅使用后代选择器来定位 ul - 它必须是元素选择器？
您有多种选择。您可以使用这样的类型选择器：.parent > ul 或兄弟选择器 .previous + ul 或 pseduo 类，如果您确定 html 结构 .parent :first-child
如果你不能在你的 HTML 中添加自定义的“BEM 类”，就没有办法让它 100% BEM。

标签： css bem oocss

【解决方案1】：

解决方案：

CSS：

.text ul {
    list-style: circle;
}
.text li {
    margin: .5em 1em;
}
.text p {
    margin-bottom: 1em;
}
/* etc. */

HTML：

<div class="text">
    <p>Here all the text is formatted</p>
</div>

【讨论】：

我认为您对 BEM 例外可能是正确的。这就是我目前正在做的事情 - 虽然我不喜欢我有一些 BEM 和一些级联。
BEM 不是设置格式化文本样式的好方法，因为干净的文本是具有尽可能少的 CSS 类的文本。使用级联可以防止在其内部重用块。但是一个格式化文本不能包含在另一个格式化文本中。标签 <p> 不能嵌套在另一个 <p> 中。

【解决方案2】：

我同意@Tarh

所以这一直伴随着 WordPress 主题开发。所有内容区域都获得了您也无法附加类的通用元素。所以你有两个解决方案：

就像 Tarh 上面描述的那样，您使用重置来终止 UL/LI 上的所有样式，并且您只使用 BEM 在您的站点中设置样式。但是，当您到达不允许您向元素添加类的内容区域时，您只需将整个内容区域包装在一个带有您喜欢的 BEM 类的 div 中，然后按照上述步骤操作即可。

2.在 WP 中，有一些不为人知的方法来处理这个问题，但它需要编写一些函数。你可以read about how to do this here。基本上，您使隐藏的格式下拉菜单可见，然后隐藏默认的“段落/标题”下拉菜单。然后，您可以根据需要格式化通用元素。喜欢：

array(
  'title' => 'Large heading',
  'block' => 'ul',
  'classes' => 'content__list'
)

但我不知道你是否真的指的是 WP 的东西，所以我打算在这里结束。

祝你好运！保持真棒！

【讨论】：