编写CSS样式时如何确定需要选中的目标元素？

选不对样式目标本质是没搞清楚两个事：一是浏览器默认样式挂在哪个元素上，二是不同嵌套层级的元素各自管什么样式效果，完全不用死记，按下面的方法判断就行：

• 先找默认样式的归属元素
  浏览器自带的默认样式只会绑定在对应语义的标签上：比如下划线是<a>标签的默认样式，列表圆点是<li>/<ul>的默认样式，按钮的默认边框是<button>标签自带的。判断的时候直接按F12打开开发者工具，点选页面上对应的元素，看右侧样式面板里的规则是绑定在哪个元素上的，直接选那个元素改就不会错。
• 按样式的功能选对应层级的元素
  常规嵌套结构里，不同层级的元素分工很明确，不要把所有样式都堆在同一个元素上：
  • 布局排列类样式（比如元素横排、元素之间的间距、整体尺寸）选外层结构元素：比如导航项横排、导航项之间的左右间距，选<li>设置就对了
  • 内容交互类样式（比如文字颜色、下划线、鼠标悬停效果、点击后的样式）选内层功能元素：比如链接的下划线、点击跳转相关的效果，选<a>设置才会生效
• 导航栏场景的固定选择逻辑
  绝大多数导航的HTML结构都是ul > li > a的三层嵌套，各层的样式职责可以直接套用：

  • ul：负责整个导航栏的整体定位、公共内外边距、清除列表默认的圆点和边距
  • li：负责单个导航项的排列方式、项与项之间的间距
  • a：负责链接本身的样式，包括下划线、文字颜色、hover效果、点击区域大小

举个导航去下划线的正确/错误写法对比：

/* 无效写法：li本身没有默认下划线，给li加去下划线规则完全不生效 */
.nav li {
  text-decoration: none;
}

/* 有效写法：选中a标签清除默认下划线，相关链接样式都写在这里 */
.nav a {
  text-decoration: none;
  color: #333;
  /* 可以把a设为块级元素撑满li，扩大点击热区 */
  display: block;
  padding: 8px 16px;
}

内容的提问来源于stack exchange，提问作者Comfort