Question

我正在尝试使用伪元素将<li>的{{1}}替换为三角形。我关注了this tutorial.

问题是我的CSS在Firefox中可以运行，但在Windows上不能运行Chrome。

这是我的CSS：

<ul>

我将目标定位为文章，因为我在页眉和页脚中有article ul { list-style: none; } article ul > li::before { font-family: FontAwesome; content: "\f0da"; color: $darkbrown; display: inline-block; width: 1em; margin-left: -1em }，我不想将三角形应用于此。

在Firefox中，这可以按预期工作（文章中的<ul>带有三角形，文章中的<ul>显示数字）。但是，在Chrome中，文章中的<ol>具有三角形，但是文章中的<ul>也具有三角形。

这是HTML的示例（对不起，它来自Drupal，有点丑陋；我尽力清理了一下）：

<ol>

Answer 1

我不确定我是否理解您的问题，因为您的代码似乎可以按预期的方式工作。我在您的<ul>内添加了一个<article>，以表明它旁边有一个三角形，而<ol>显示了默认编号。尝试在Chrome中浏览该示例以查看结果。

article ul {
  list-style: none;
}

article ul>li::before {
  font-family: FontAwesome;
  content: "\f0da";
  color: red;
  display: inline-block;
  width: 1em;
  margin-left: -1em
}

<a href="#main-content" class="visually-hidden focusable skip-link">
    メインコンテンツに移動
</a>
<div role="main" class="main-container container js-quickedit-main-content">
  <div class="row">

    <div class="col-sm-12" role="heading">

      <section class="col-sm-12">
        <div class="row">
          <div class="col-md-1"></div>
          <div class="col-md-10 col-xs-12">


            <a id="main-content"></a>
            <div class="region region-content">
              <article role="article" about="/myurl" class="lp full clearfix">
                <div class="content">
                  <div class="layout layout--onecol">
                    <div class="layout__region layout__region--content">
                      <section class="block block-layout-builder block-field-blocknodelpbody clearfix">
                        <div class="field field--name-body field--type-text-with-summary field--label-hidden field--item">
                          <ol>
                            <li>item 1</li>
                            <li>item 2</li>
                            <li>item 3</li>
                          </ol>
                          <ul>
                            <li>item 1</li>
                            <li>item 2</li>
                            <li>item 3</li>
                          </ul>
                        </div>
                      </section>
                    </div>
                  </div>
                </div>
              </article>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</div>

Answer 2

我终于找到了问题，这与使用Drupal CriticalCSS模块内嵌关键CSS有关。

基本上，发生的事情是我基于旧CSS生成了关键CSS，而此内联CSS（关键CSS）将覆盖我正在编辑的文件中的工作CSS。

显然，Firefox优先考虑非内联CSS，而Chrome和Edge优先考虑内联CSS，因此显示内容有所不同的原因。

经验教训：在编辑CSS时，请确保任何内联CSS是最新的。（我正在寻找使之自动化的方法。）

伪元素可以在Firefox中使用，但不能在Chrome中使用，为什么？

2 个答案: