0

I am trying to find out how to format for an element that is different throughout my site. For example, the background for my list in my navigation bar is green. I am making a list down in the body for listing multiple items. It is automatically taking all of the formatting in my nav bar and putting it in my list like it should.

My question is how to make a ID or CLASS to take away the formatting used in my nav bar to make my own formatting for this list in my body. I tried looking up youtube videos and googling for this but all I could find was formatting for multiple selectors at the same time.

How do I override the CSS for my nav bar for the list in the body?

for my class I tried doing and then ul.amazon01 { background-color: none; and it does not work.

My nav bar HTML:

<div class="flex-container">
    <div class="box1"> 
        <ul id="nav01">
            <li class="dropdown">
                <a href="#" class="dropbtn"># Menu</a>
                    <div class="dropdown-content">
                        <a href="index.html"></a>
                        <a>#</a>
                        <a href="#</a>
                        <a href="#</a>
                        <a href="#</a>
                        <a href="#</a>
                    </div>
            </li>
        </ul>
    </div>
</div>

ul {
  list-style-type: none;
  margin: 0;
  padding: 0.25rem;
  overflow: hidden;
  font-size: 1rem;
  background-color: green;
  border: 3px solid darkgreen;
}

This is the I want to use in my body

<ul class="amazon01">
    <li>#</li>
    <li>#</li>
    <li>#</li>
    <li>#</li>
</ul>

CSS

ul.amazon01 {
    background-color: none;
}
4

1 回答 1

3

我根本不推荐样式化 HTML 标签。相反，您应该只使用类来应用样式。

所以而不是

ul {
  ...
}

利用

.nav01 {
  ...
}

如果需要，您可以多次重用您的类，但是通过使用类，您可以完全控制样式的应用位置，并且无需覆盖样式。

如果您有多个样式重叠的标签，您可以使用以下语法：

.nav01, .amazon01 {
  styling that is applied for both classes...
}

.nav01 {
  detailed styling... 
}

.amazon01 {
  detailed styling... 
}
于 2019-10-28T07:28:26.730 回答