Question

我开始使用CSS而且我遇到了一些问题。当然这很简单，但正如我所说，我最近刚开始。

我有这样的HTML：

    <header>
        <nav>
            <div>Inicio</div>
            <div>Secciones</div>
            <div>Contacto</div>
        </nav>
    </header>

我希望它像这张图片一样：

我的问题是导航中的divs元素。我不知道如何在不修改html的情况下仅为这些div提供样式。我的想法是仅将样式应用于导航标记的子标记，但我一直在阅读selectors in w3school，但我无法找到适合我的标记。一些想法？

这是我现在的标题样式，但显然它将样式应用于所有div并且我不想要：

header {
    background-image: url("banner.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    height: 170px;
    width: auto;
}

nav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: inline;
}

div{
    display: inline;
}

Answer 1

如果您不想更改HTML，则以下是div的选择器：

header > nav > div {
  color: red;
}

    <header>
        <nav>
            <div>Inicio</div>
            <div>Secciones</div>
            <div>Contacto</div>
        </nav>
    </header>

此选择器意味着

nav的直接子节点是div，来自导航头的直接子节点

Answer 2

使用直接子选择器

nav > div {
   display: inline;
}

Answer 3

你可以做多件事来实现你想要的......

<强> 1。为导航元素分配ID或类

    <header>
        <nav id="menu">
            <div>Inicio</div>
            <div>Secciones</div>
            <div>Contacto</div>
        </nav>
    </header>

CSS代码：

nav#menu div {
    display: inline;
}

或者，如果您使用课程（class="menu"），则css将为nav.menu div

<强> 2。使用＆gt;将样式仅分配给nav元素内的div

只需使用以下CSS代码，该代码仅将样式分配给导航的子代：

nav > div {
    display: inline;
}

选项1和2也可以一起使用，例如nav#menu > div

如何使样式仅影响子标签？

3 个答案: