CSS中.navbar和.navbar a之间的区别

Question

.navbar和.navbar之间的区别是什么？

   .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;
    }

我无法找到它们之间的区别。请不要生气我是web技术的菜鸟

Answer 1

在这种情况下.navbar是一个css类，主要指的是超链接所在的父元素（即HTML文件中的<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*/
}

请告诉我们。你可以检查像this这样的网站，阅读和阅读很多，你的技能将通过练习和阅读大大提高。

Answer 2

如果您有以下HTML

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

.navbar将适用于您的div，然后适用于其中的所有内容

.navbar a将仅用<a>应用于div内的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的样式