CSS - 第一个子伪元素不起作用答案

【问题标题】：CSS - First Child Pseudo Element Not WorkingCSS - 第一个子伪元素不起作用
【发布时间】：2021-06-18 07:58:00
【问题描述】：

任何帮助将不胜感激，但不太理解为什么下面看似简单的代码在 CSS 中不起作用。我想在第一个 i 元素上添加一个 margin-left。

这是 CSS：

header.site-header .right_side_menu i:first-child {
    margin-left: 45px;
}

还有我的 HTML：

<header id="masthead" class="site-header navbar-static-top <?php echo wp_bootstrap_starter_bg_class(); ?>" role="banner">
    <div class="container-fluid px-5">
        <div class="row">
            <div class="col-12 col-md-5 left_side_menu">
                <i class="fas fa-search"></i>
                <?php
                    wp_nav_menu(array(
                        'menu'            => '70',
                        'container'       => 'div',
                        'container_id'    => 'left-nav',
                        'menu_id'         => false,
                        'menu_class'      => 'navbar-nav',
                        'depth'           => 3,
                        'fallback_cb'     => 'wp_bootstrap_navwalker::fallback',
                        'walker'          => new wp_bootstrap_navwalker()
                    ));
                ?>
            </div>
            <div class="col-12 col-md-2 logo_wrapper">
                <img src="" class="logo" alt="" />
            </div>
            <div class="col-12 col-md-5 right_side_menu">
                <?php
                    wp_nav_menu(array(
                        'menu'            => '71',
                        'container'       => 'div',
                        'container_id'    => 'right-nav',
                        'menu_id'         => false,
                        'menu_class'      => 'navbar-nav',
                        'depth'           => 3,
                        'fallback_cb'     => 'wp_bootstrap_navwalker::fallback',
                        'walker'          => new wp_bootstrap_navwalker()
                    ));
                ?>
                <a href="" target="_blank" title="Click here for our Facebook page"><i class="fab fa-facebook-f"></i></a>
                <a href="" target="_blank" title="Click here for our Instagram page"><i class="fab fa-instagram"></i></a>
                <a href="" target="_blank" title="Click here for our Twitter page"><i class="fab fa-twitter"></i></a>
                <a href="" target="_blank" title="Click here for our Linkedin page"><i class="fab fa-linkedin-in"></i></a>
            </div>
        </div>
    </div>
</header><!-- #masthead -->

谢谢！

【问题讨论】：

标题元素的代码在哪里？
我已经编辑了我的原始帖子@ale917k
对不起，你是对的，我确实想添加 margin-left @Johannes

标签： html css css-selectors pseudo-element

【解决方案1】：

所有.right_side_menu 中的i 元素都是第一个子元素，因为它们是包装a 元素的（第一个也是唯一的）子元素。因此，您应该将选择器更改为

header.site-header .right_side_menu a:first-child i {
    margin-left: 45px;
}

...只影响第一个a内的i

【讨论】：

我试过了，但没有运气。它为所有 i 元素添加了 margin-left 。可能有些事情是 CSS 做不到的吧哈哈！
抱歉，鉴于您发布的代码，这是不可能的。请再仔细看看。这个 CSS 选择器（在你给定的 HTML 代码中）可以只选择 one i 元素。

【解决方案2】：

尝试a 而不是i 应该可以工作

【讨论】：

试过这个：header.site-header .right_side_menu a:first-child i 不幸的是不起作用。