如何选择同ID但不同type属性的input元素？

在页面中存在多个ID相同但type属性不同的input元素（这种情况在React项目中较为常见），如何编写CSS选择器精准定位目标元素？

代码示例 #

初始CSS样式

input{width:100px;}

页面HTML结构

<div id="wrapper">
  <div id="div1">
    <input id="bob" type="text" value="Not me" />
  </div>
  <div id="div2">
    <input id="bob" type="hidden" />
  </div>
  <div id="div3">
    <input id="bob" type="email" value="Found Me" />
  </div>
</div>

解决方案 #

通过ID选择器结合属性选择器的组合写法，就能精准匹配到目标元素：

• 定位type="text"的input元素：

  #bob[type="text"] {
    /* 自定义样式示例 */
    border: 1px solid red;
  }
  

• 定位type="email"的input元素：

  #bob[type="email"] {
    /* 自定义样式示例 */
    border: 1px solid green;
  }
  

• 定位type="hidden"的input元素（写法逻辑一致）：

  #bob[type="hidden"] {
    /* 自定义样式示例 */
    display: none;
  }
  

补充说明 #

HTML规范里明确要求ID必须唯一，但在React这类框架的开发场景中，组件复用等操作可能导致同ID元素出现。这种组合选择器的方式可以绕过ID重复的问题，通过type属性进一步筛选出目标元素。

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