Question

我有一个横向NAV部分，需要将前两个单词（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;
}

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>

Answer 2

您可以使用nth-of-type()。

对于您的示例，您需要在nth-of-type上使用<li>。

header nav li:nth-of-type(-n+2) {
    text-transform: capitalize;
}

https://jsfiddle.net/qfLrsdwr/1

我的JSFiddle有不同的选择器和标记用于演示目的。

<header>
    <h1>Title</h1>
    <nav class="primary-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>

.primary-nav li {
    text-transform: lowercase;
}
.primary-nav li:nth-of-type(-n+2) {
    text-transform: capitalize;
}

需要大写导航栏的前两个单词

2 个答案: