星途面试题库

面试题：CSS基本选择器：类选择器与ID选择器的应用场景对比

请阐述在CSS中类选择器（.classname）和ID选择器（#idname）各自的应用场景，并举例说明何时应该优先使用类选择器，何时应该优先使用ID选择器。

46.6万热度

难度

前端开发CSS

知识考点

AI 面试

面试题答案

类选择器（.classname）应用场景

样式复用：当多个元素需要应用相同的样式时，使用类选择器。例如，在一个网页中有多个按钮都需要相同的样式，如按钮的背景颜色、字体大小、边框样式等。

.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
}

<button class="button">按钮1</button>
<button class="button">按钮2</button>

模块化设计：在构建组件库或进行模块化开发时，类选择器用于定义组件的样式。比如一个卡片组件，多个不同内容的卡片都可应用此样式。

.card {
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

<div class="card">
  <h3>卡片标题</h3>
  <p>卡片内容</p>
</div>
<div class="card">
  <h3>另一卡片标题</h3>
  <p>另一卡片内容</p>
</div>

ID选择器（#idname）应用场景

唯一标识：用于对页面中独一无二的元素设置样式。例如，页面的导航栏、页脚等，每个页面通常只有一个导航栏和一个页脚。

#navbar {
  background-color: lightgray;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

<nav id="navbar">
  <a href="#">首页</a>
  <a href="#">关于</a>
  <a href="#">联系我们</a>
</nav>

JavaScript操作：在JavaScript中，经常通过ID来获取元素并进行操作。比如实现一个切换页面主题的功能，就可以通过获取特定ID的元素来修改其样式。

#body {
  background-color: white;
  color: black;
}
#dark-mode #body {
  background-color: black;
  color: white;
}

<body id="body">
  <!-- 页面内容 -->
  <button onclick="toggleDarkMode()">切换主题</button>
  <script>
    function toggleDarkMode() {
      var body = document.getElementById('body');
      body.classList.toggle('dark-mode');
    }
  </script>
</body>

优先使用类选择器的情况

样式复用频繁：如上述按钮和卡片组件，多个元素需要共享相同样式时，优先使用类选择器，避免重复编写样式代码。
实现响应式布局：在不同屏幕尺寸下，可能有多个元素需要根据屏幕变化应用不同的类来改变样式。例如，通过媒体查询为不同屏幕宽度下的多个图片应用不同的类，以调整图片的显示方式。

优先使用ID选择器的情况

唯一性需求：当元素在整个页面中具有唯一性，如页面的特定区域，像登录框（假设只有一个登录框），此时使用ID选择器更合适。
与JavaScript紧密结合：如果一个元素主要是为了在JavaScript中进行特定操作，如动画效果、事件绑定等，使用ID选择器方便获取元素。例如，一个轮播图组件，通过ID获取轮播图容器元素，然后进行图片切换等操作。