html - 需要将导航栏的前2个单词大写

我有一个水平的NAV部分，需要将前2个单词大写（共5个）。我需要将“开发人员和设计师”一词大写。我知道它是一个类还是跨度，但是我只是在学习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;
}

最佳答案

您正在寻找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>

关于html - 需要将导航栏的前2个单词大写，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33482535/