强调CSS中的前5个元素

编程问答 2022-11-08

问题描述

我是初学者Web开发人员。我在Bootstrap 4中使用我的项目。

我有带下划线动画的菜单。很好。

我有以下代码（菜单和CSS）：

    .navbar-light .navbar-nav .nav-link {
        color: #ffffff;
        font-size: 1rem;
        font-family: "Now Medium";
        margin-top: 7px;
    }
    
    @media (min-width: 994px) {
        .navbar-light .navbar-nav .nav-link {
            color: #ffffff;
            font-size: 1rem;
            font-family: "Now Medium";
            margin-top: 7px;
            display: inline;
            position: relative;
            overflow: hidden;
        }
    
        .navbar-light .navbar-nav .nav-link:after {
            content: "";
            position: absolute;
            z-index: -1;
            right: 0;
            width: 0;
            bottom: -5px;
            background: #0ad3f1;
            height: 2px;
            transition-property: width;
            transition-duration: 0.2s;
            transition-timing-function: ease-out;
        }
        .navbar-light .navbar-nav .nav-link:hover:after,.navbar-light .navbar-nav .nav-link:focus:after,.navbar-light .navbar-nav .nav-link:active:after {
            left: 0;
            right: auto;
            width: 100%;
        }
    }

<nav class="navbar navbar-expand-lg text-body px-md-0 pb-md-0 navbar-light w-100 pt-lg-0">
                <a class="navbar-brand" href="/">
                    <img src="images/logo.svg" class="brand-logo pb-2 pt-3 pt-md-0" title="logo">
                </a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarmenu"
                        aria-controls="navbarmenu" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="line"></span>
                    <span class="line"></span>
                    <span class="line"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarmenu">
                    <ul class="navbar-nav">
                        <li class="nav-item d-block d-lg-none  d-xl-block text-center">
                            <a class="nav-link active" href="#">Start</a>
                        </li>
                        <li class="nav-item text-center">
                            <a class="nav-link" href="#">5</a>
                        </li>
                        <li class="nav-item text-center">
                            <a class="nav-link" href="#">4</a>
                        </li>
                        <li class="nav-item text-center">
                            <a class="nav-link nav-link-selected" href="#">3 </a>
                        </li>
                        <li class="nav-item text-center">
                            <a class="nav-link" href="#">2</a>
                        </li>
                        <li class="nav-item mx-xl-4 mb-2 mb-md-0 text-center">
                            <a class="nav-link order-visit" href="#">1</a>
                        </li>
                        <li class="nav-item text-center text-lg-right">
                            123
                        </li>
                        <li class="nav-item text-center d-inline-block d-lg-none language-Box2">
                            abc
                        </li>
                    </ul>
                </div>
            </nav>

效果很好，但是我只想在此菜单的前4个元素下划线动画。

我希望当前功能保持不变，但仅适用于菜单的前4个项目

我该怎么做？

请帮助我。

解决方法

您尚未指定要强调的选择器，但我猜它是mysqld --user=mysql --upgrade=FORCE 。我将为您写出许多样式的前4个元素的样式规则：

navbar-nav li
,

为其余部分添加另一个ID或类，并根据需要进行更改

htmltwitter-bootstrap