.navbar与.navbar a在CSS中的差异

Question

那个.navbar和.navbar a有什么区别？

   .navbar {
        overflow: hidden;
        background-color: #333;
        font-family: Arial;
    }


    .navbar a {
        float: left;
        font-size: 16px;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }

我找不到它们之间的区别。请不要生气，我是网络技术的新手

Answer 1

在本例中，.navbar是一个css类，它主要引用超链接所在的父元素(即<a>文件中的<a>)。它可以是div或某些容器元素，这取决于您的HTML。

而.navbar a是指容器元素中的一个子元素的任何<a>。不是.navbar元素子元素的超链接不会受到影响。例如，让我们看看这个html块：

<div class="navbar">
  <a href="https://stackoverflow.com">Click here!</a>
</div>

假设上面的内容是您的index.html文件的一部分。在css文件中：

.navbar {
  /*all css style here will affect your div class="navbar"*/
}
.navbar a {
  /*put something here to style all hyperlinks that are child to .navbar elements*/
}

请让我们知道。你可以检查像这这样的网站，阅读和阅读很多，通过练习和阅读，你的技能将得到很大提高。

Answer 2

如果您有下面的HTML

<div class="navbar">
     <p>Hello World>
     <a href="#"> Hello World</a>
</div>

.navbar将被应用到您的div中，然后应用于其中的所有内容。

.navbar a只应用于div中的<a>标记和class=navbar。

Answer 3

要解释它，请考虑以下html代码：

<div class = "navbar">
    <a></a>
</div>

第一个div将应用以下样式：

overflow: hidden;
background-color: #333;
font-family: Arial;

但是，<a></a>将应用以下样式：

    float: left;
    font-size: 16px;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;

对于<a>标记，不需要添加任何class属性。它将按照您定义的样式.navbar a自动应用样式