ID以idTaskControls_、idTaskItem_开头元素后代表单元素CSS样式异常问题

你的写法不能实现预期效果，主要有两处错误：

• 第一，属性选择器用错了属性。你的两个顶层div是id属性带指定前缀，而你写的是[name*="idTaskControls_"]，匹配的是name属性包含对应字符串的元素，完全匹配不到你要的顶层容器。另外要匹配id前缀建议用[^=]属性选择器而不是*=，[id^="idTaskControls_"]表示id以指定字符串开头的元素，匹配更精准。
• 第二，CSS选择器逗号分隔的逻辑错误。逗号分隔的是完整的独立选择器，你写的[name*="idTaskControls_"] input, textarea, select，实际等价于三个独立选择器：
  1. [name*="idTaskControls_"] input
  2. textarea（全局所有textarea）
  3. select（全局所有select）
     所以两套规则里的全局textarea、select都会互相覆盖，所有同类型元素都会同时命中两套规则，就会出现样式混乱。

修正后的代码 #

/* 匹配id以idTaskControls_开头的容器下的所有input、textarea、select */
[id^="idTaskControls_"] input,
[id^="idTaskControls_"] textarea,
[id^="idTaskControls_"] select {
    background: none;
    border: solid thin grey;
    border-bottom: solid medium grey;   
}

/* 匹配id以idTaskItem_开头的容器下的所有input、textarea、select */
[id^="idTaskItem_"] input,
[id^="idTaskItem_"] textarea,
[id^="idTaskItem_"] select {
    background: none;
    border-top: solid thin lightgray;
    border-bottom: solid thin lightgray;
    border-left: solid medium grey;
    border-right: solid thin lightgray;  
}

如果你实际场景中顶层div的id就是示例里的idTaskControls、idTaskItem，没有下划线后缀，把选择器里的下划线删除即可。

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