html - 需要大写导航栏的前2个字

Question

我有一个水平 NAV 部分，需要将前 2 个单词(共 5 个)大写。我需要将 Developers 和 Designers 这两个词大写。我知道它是一个类或跨度，但我只是在学习 CSS，无法弄明白。

谢谢!

这是HTML

<header>
        <h1>Title</h1>
        <nav>
                <ul>
                    <li><a href="#">Developers</a></li>
                    <li><a href="#">Designers</a></li>
                    <li><a href="#">How it Works</a></li>
                    <li><a href="#">Our Team</a></li>
                    <li><a href="#">Blog</a></li>
                </ul>
        </nav>
</header>

CSS

header nav ul li {
  float: right;
  width: 8%;
}

header nav a {
    float: right;
    display: block;
    color: white;
    text-decoration: none;
    width: 110px;
}

Answer 1

您正在寻找 text-transform: uppercase 和 nth-child 选择器。

是这样的:

header nav ul li:nth-child(-n+2) {
  text-transform: uppercase;
}

<header>
        <h1>Title</h1>
        <nav>
                <ul>
                    <li><a href="#">Developers</a></li>
                    <li><a href="#">Designers</a></li>
                    <li><a href="#">How it Works</a></li>
                    <li><a href="#">Our Team</a></li>
                    <li><a href="#">Blog</a></li>
                </ul>
        </nav>
</header>