如何在 CSS 中自定义导航栏中的某些项目?

提早

我正在尝试制作一个导航栏,但是我在更改单独的元素而不更改导航栏中的每个项目时遇到了很多麻烦。

例如,如果我只希望导航栏中的一个元素(在名称和其他元素(如项目、简历等)之间)有更多的填充/空间,我将如何实现?或者,即使我想更改导航栏中单个项目的文本大小(使名字大于其余部分)。

这是 HTML:

<div class="navbar">
    <a href="#First Name">First Name</a>
    <a href="#Projects">Projects</a>
    <a href="#Resume">Resume</a>
    <a href="#About">About</a>
</div>

这是CSS:

    .navbar {
        overflow: hidden;
        background-color: white;
        position: fixed; /* Set the navbar to fixed position */
        top: 0; /* Position the navbar at the top of the page */
        width: 100%; /* Full width */
        border-bottom: 1px solid black;

    }

    .navbar a {
        float: left;
        display: block;
        color: black;
        text-align: center;
        padding: 30px 16px;
        text-decoration: none;
        font-size: 200%;
    }
符号链接

一种方法是使用:first-of-typenth-of-type(1)在这种情况下,这将选择 中的第一个锚元素navbar您可以更改参数 innth-of-type以选择菜单中的任何元素。

.navbar {
  overflow: hidden;
  background-color: white;
  position: fixed;
  /* Set the navbar to fixed position */
  top: 0;
  /* Position the navbar at the top of the page */
  width: 100%;
  /* Full width */
  border-bottom: 1px solid black;
}

.navbar a {
  float: left;
  display: block;
  color: black;
  text-align: center;
  padding: 30px 10px;
  text-decoration: none;
  font-size: 100%;
}

.navbar a:nth-of-type(1) {
  padding-right: 20px;
  background: #777;
  font-size: 2em;
}
<div class="navbar">
  <a href="#First Name">First Name</a>
  <a href="#Projects">Projects</a>
  <a href="#Resume">Resume</a>
  <a href="#About">About</a>
</div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在React中根据CSS自定义属性的值检查条件

如何在文档中定义自定义CSS?

如何在JavaFX中从CSS设置自定义字体?

如何在rmarkdown的导航栏标题字段中添加自定义徽标?

如何在现有的物化CSS按钮和导航栏中添加自定义CSS样式?

如何添加由Angular4中的某些用户输入定义的自定义CSS?

如何在CSS的自定义复选框中更改复选框的颜色?

如何在角度的ag网格单元格中应用自定义css类?

如何在NativeScript中创建自定义导航栏?

如何在导航栏中包含自定义开关

如何在Flutter中制作自定义底部导航栏

如何在React Native中创建自定义的顶部导航栏

如何在Angular中的单个Toast消息中添加自定义CSS?

如何在swiftui中自定义导航栏

如何在CSS中自定义下拉菜单?

自定义Bootstrap 3中的搜索框CSS,并在导航栏中放置元素

如何在MVC引导程序中自定义导航栏(宽度)

如何在CSS的导航栏中添加徽标?

如何在css中水平对齐导航栏?

如何在CSS中创建自定义边框设计

如何在我的自定义导航控制器中隐藏标签栏?

如何自定义导航栏中悬停的大小?

如何在 CSS 中垂直对齐两个导航栏项目,然后是图像,然后是两个导航栏项目?

如何在 React 中设置自定义 css 样式?

如何在nextjs中添加自定义Css

如何在 css 中的导航栏上应用模糊效果

如何在 NuxtJS 中的 nuxt.config.js 中导入自定义 css 文件?

如何在 tailwind-css 中自定义容器宽度?

如何在 css react 的导航栏中对齐我的图标?