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

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

html css

Html 如何使样式仅影响子标签？,html,css,Html,Css,我开始使用CSS，我有一些问题。当然这很简单，但正如我所说，我最近才开始我有这样一个HTML： <header> <nav> <div>Inicio</div> <div>Secciones</div> <div>Contacto</div> </nav> </h

我开始使用CSS，我有一些问题。当然这很简单，但正如我所说，我最近才开始

我有这样一个HTML：

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

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

header>nav>div{
颜色：红色；
}


伊尼西奥
塞奇奥尼斯
联系人

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

header>nav>div{
颜色：红色；
}


伊尼西奥
塞奇奥尼斯
联系人

使用直接子选择器

nav > div {
   display: inline;
}

使用直接子选择器

nav > div {
   display: inline;
}

你可以做很多事情来实现你想要的

1。为导航元素分配ID或类别

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

或者，如果使用类（

class=“menu”

），css将是

nav.menu div

2。使用>将样式仅指定给导航元素内的div

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

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

nav > div {
    display: inline;
}

选项1和2也可以一起使用，例如

nav#menu>div

您可以做多种事情来实现您想要的