Question

我目前正在浏览Odin课程的网页，并使用html列表在我的页面顶部创建了一个导航栏，但我仍然希望能够在整个页面中正常使用列表。< / p>

有没有办法只在一个设置区域内调用一组CSS属性，比如div标签如何用于HTML中的类调用？

HTML：

<ul>
    <li><a class="active" href="#home">Home</a>
</li>
    <li><a href="#music">Music</a></li>
    <li><a href="#writing">Writing</a></li>
    <li style="float:right"><a href="#about">About</a></li>
</ul>

<div class="mainBody">
    <h1>aeaeae</h1>

    <p>A collection of work by.</p>
</div>

<ul>
    <li><a href="#2016">2016</a></li>
</ul>

CSS：

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #bf5f5b;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #c46561;
}

如果这是一个简单的问题，我道歉，但我四处寻找，无法找到并回答。

Answer 1

您可以在导航栏id标记中添加<ul>属性，然后将ID放在CSS中的每个li类之前，只选择这些标记。

例如

<ul id="navbar">
    <li><a class="active" href="#home">Home</a></li>
    <li><a href="#music">Music</a></li>
    <li><a href="#writing">Writing</a></li>
    <li style="float:right"><a href="#about">About</a></li>
</ul>

ul#navbar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #bf5f5b;
}

ul#navbar li {
    float: left;
}

ul#navbar li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

ul#navbar li a:hover {
    background-color: #c46561;
}

ul#navbar选择器只会选择<ul>属性为“navbar”的id标记。

ul#navbar li选择器只会选择一个<li>标记，该标记是<ul>标记的子标记，其id属性为“navbar”。

有关CSS选择器的更多信息，请参阅此处：https://developer.mozilla.org/en/docs/Web/Guide/CSS/Getting_started/Selectors

不同的CSS标签属性

1 个答案: