Html 有没有办法让这个ID加上CSS规则不那么具体？

我一直在使用ID加上子体样式规则，使div的所有子体都没有填充和边距。但我注意到它比ID选择器中的样式更具体

我有多个div。有没有办法让它不那么具体

在下面的示例中，不应用填充和边框，因为ID+*更具体：

清单1项目1{ 左侧填充：10px； 轮廓：1px绿色虚线； } 清单2项目1{ 左侧填充：20px； 轮廓：1px蓝色虚线； } 杂货店老板1{ 左：40px； 顶部：20px； 位置：绝对位置； } 杂货店老板2{ 左：200px； 顶部：20px； 位置：绝对位置； } 杂货店1*{ 保证金：0； 填充：0； 大纲：无； } 杂货店2*{ 保证金：0； 填充：0； 大纲：无； } 面包 黄油棒 一加仑牛奶 面包 黄油棒 一加仑牛奶 通配符选择器：[id^=GroceryList]

第一个类型选择器：li:第一个类型选择器

现在大家在一起

杂货店老板1{ 左：40px； 顶部：20px； 位置：绝对位置； } 杂货店老板2{ 左：200px； 顶部：20px； 位置：绝对位置； } /*现在被下面的选择器覆盖*/ [id^=GroceryList]*{ 保证金：0； 填充：0； 大纲：无； } [id^=GroceryList]ol li:类型的第一个{ 左侧填充：10px； 轮廓：1px绿色虚线； } /*覆盖上面的规则*/ 清单2项目1{ 左侧填充：20px； 轮廓：1px蓝色虚线； } 面包 黄油棒 一加仑牛奶 面包 黄油棒 一加仑牛奶

---

可以使用以GroceryList字符串开头的属性选择器，但不能使用字符串后面的数字

[id^=GroceryList] * {
  margin: 0;
  padding: 0;
  outline: none;
}

这不会覆盖您定义的更具体的填充规则

清单1项目1{ 左侧填充：10px； 轮廓：1px绿色虚线； } 清单2项目1{ 左侧填充：20px； 轮廓：1px蓝色虚线； } 杂货店老板1{ 左：40px； 顶部：20px； 位置：绝对位置； } 杂货店老板2{ 左：200px； 顶部：20px； 位置：绝对位置； } [id^=GroceryList]*{ 保证金：0； 填充：0； 大纲：无； } 面包 黄油棒 一加仑牛奶 面包 黄油棒 一加仑牛奶

---

同意！这就是你的方式：[id^=GroceryList]比我的方式要好：div[id^=GroceryList]IMO:@Frish-Yah，因为id必须是唯一的，包括规则前面的选择器似乎是多余的。[id^=GroceryList]*要匹配一个以GroceryList开头的值，以便它匹配这两个值，对吗？如果我想特别针对每个div，我会使用[id=GroceryList1]*和[id=GroceryList2]*正确吗？@1.21gigawatts您的评论中的所有内容都是正确的。尝试使用类？@markschultheis这是一个独特的用例，我想知道这是可能的；我理解，我的评论更多的是一个一般性的陈述，正如我所注意到的，当一个ID在CSS中使用时，事情往往变得复杂，需要维护等等。这不是一个坏问题，我的评论只是，关于这方面的一般性的评论。我确实投票了这个问题，因为我认为它增加了一般知识库。@Markschultheis和ID的问题确实变得更复杂，而且更容易解决。但就我而言，我有一本ID字典。因此，我可以管理它并随意创建新ID。我也可以切换到类，但这增加了一些复杂性，目前必须对其进行优先级排序。您使用第一个类型选择器的原因是什么？如果杂货店列表的第一个列表元素上的ID模式仍然存在，那么您可以使用第一个类型，这样就不必设置ID的样式。如果您曾经有过像id=list3item2这样的东西，那么这当然是行不通的。然后你可以使用第n种类型！