Cant 样式 ul 列表（bootstrap 4，wordpress 主题）

Posted 2023-03-06

【中文标题】Cant 样式 ul 列表（bootstrap 4，wordpress 主题）

【英文标题】：Cant style ul list (bootstrap 4, wordpress theme)

【发布时间】：2019-03-28 09:47:42

【问题描述】：

我目前正面临这个烦人的问题，即我无法设置 ul 列表的样式。我尝试了几件事；例如使用 # 而不是 .针对“社交”类时。没用。

这是我的代码：

html：

<div class="header-information">
    <div class="socials">
    <?php
        $args = array(
            'theme_location' =>   'social-menu',
            'container'       =>        'nav',
            'container_class' => 'socials',
            'container_id' => 'socials',
            'link_before' => '<span class="sr-text">',
            'link_after'  => '</span>'
        );

        wp_nav_menu($args);
    ?>
    </div> <!--.socials-->
    <div class="address">
        <p>8000 Zürich, Teststrasse 12 </p>
        <p>Telefonnummer: [phone] </p>
    </div>
</div><!--.header-information-->

css：

.socials.nav ul 
    list-style: none;
    text-align: center;
    padding: 0;


@media only screen and (min-width: 768px) 
    nav.socials ul 
        float: right;
    


nav.socials ul li a:before 
    font-family: 'Font Awesome 5 Brands';
    display: inline-block;
    vertical-align: top;
    padding: 0 5px;
    content: '\f6af';
    font-size: 30px;

【问题讨论】：

Bootstrap CSS 中可能有一种压倒一切的样式。尝试右键单击元素并选择“检查”（每个浏览器的确切措辞不同）。这将向您展示影响元素的样式规则。如果您的目标正确，那么您将看到您的样式，但可能会被划掉。狩猎愉快！

您也可以将 !important 附加到您的样式中，例如，尝试.socials background-color:red!important; 看看会发生什么。

它有点难以预测。请张贴你的'ul'的html，顺便说一下nav是标签还是类？

您的 CSS 包含 nav.socials（媒体查询）和 socials.nav（在顶部）。只有其中一个是正确的。

即使我只使用这两个（导航/社交）之一，它也不起作用。我也试过 #socials.nav ul 。也没有用。

【参考方案1】：

如果你的菜单结构是这样的，

<div class="header-information">
  <div class="socials">
  <nav>
    <ul>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
      <li>Four</li>
      <li>Five</li>
    </ul>
  </nav>
</div>

那么你的选择器有问题。

下面这一行，

.socials.nav ul

需要这样，

.socials nav ul 

因为nav 不是a 类而是一个元素。

希望这会有所帮助。干杯