html导航默认选中状态,css 导航栏下划线跟随效果，默认第一个li为选中状态

可以通过添加 CSS 样式来实现导航栏下划线跟随效果和默认选中状态。具体步骤如下：

HTML 代码：

<nav>
  <ul>
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

CSS 代码：

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav li {
  display: inline-block;
  margin-right: 20px;
}

nav li.active a {
  color: red;
  /* 默认选中状态 */
}

nav li a {
  position: relative;
  text-decoration: none;
  color: black;
}

nav li a:hover {
  color: blue;
}

nav li a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background-color: blue;
  transition: width 0.3s ease-in-out;
}

nav li.active a::after,
nav li a:hover::after {
  width: 100%;
  /* 下划线跟随效果 */
}

代码说明：

- `nav ul` 和 `nav li` 用于设置导航栏和列表项的样式；
- `nav li.active a` 用于设置默认选中状态；
- `nav li a` 设置导航栏链接的样式，并设置 `position: relative` 用于下划线的定位；
- `nav li a:hover` 用于设置鼠标悬停时的样式；
- `nav li a::after` 用于添加下划线，并设置 `position: absolute` 使其相对于链接定位，设置 `width: 0` 使其不可见，设置 `transition` 实现过渡效果；
- `nav li.active a::after` 和 `nav li a:hover::after` 用于控制下划线跟随效果。