html - 不同的 CSS 标签属性

Question

我目前正在处理一个网页，同时正在学习 Odin 类(class)，并使用 html 列表在我的页面顶部创建了一个导航栏，但是我仍然希望能够在整个页面中正常使用列表。

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

这是 HTML and CSS in jsfiddle或以下。

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 放在每个 li 之前在您的 CSS 中添加类以仅选择这些标签。

例如。

<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>具有 id 的标签“导航栏”的属性。

ul#navbar li选择器只会选择 <li> <ul> 的子标签具有 id 的标签“导航栏”的属性。

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