如何防止 CSS 规则之间的冲突

Question

为html小部件创建css选择器的最佳策略是什么？这些选择器不应与子元素冲突，也不应与可能的常规选择器冲突。

/* this item class it is already done, has no relation with my widgets´ items
  and i can´t modify it*/        
   .item { color:red; }    
   .my-first-widget{...}
   .my-first-widget .item { color: blue; font-size:16px;}
   .my-second-widget{...} 
   .my-second-widget .item { font-size:14px;} 

上述代码的问题：

如果我在 my-first widget 中插入 my-second-widget（
1. 但不在 my-first-widget .item 中），来自 my-second widget 的项目将是蓝色的（我希望它们从它的父级继承颜色）。
2. 我将 my-second-widget 插入一个规则定义为 .item 的项目，来自 my-second-widget 的项目将是红色的（我希望它们从它的父项继承颜色;而不是从不相关的通用项的类）。

哪个是设置可导出小部件样式的最佳解决方案？

解决方案 1（使用父类 a 前缀）

   .my-first-widget{...}
   .my-first-widget-item { color: blue; font-size:16px;}
   .my-second-widget{} 
   .my-second-widget-item { font-size:14px;}

解决方案 2（使用子选择器）

   .my-first-widget{...}
   .my-first-widget > .item { color: blue; font-size:16px;}
   .my-second-widget{ color: black;} 
   .my-second-widget > .item { font-size:14px;}

使用解决方案2，我仍然与通用的.item选择器发生冲突...

还有其他想法吗？

Answer 1

我认为

以下内容可能对您有用。

如果这是您的 HTML：

<div class="project">
    <div class="item">item outside widget</div>
    <div class="my-second-widget"><span class="item">item</span></div>
</div>

试试这个 CSS：

.item {
    color:red;
}
.my-first-widget {
}
.my-first-widget .item {
    color: blue;
    font-size:16px;
}
.my-second-widget {
}
.my-second-widget .item {
    color: inherit;
    font-size:14px;
}
.project {
}

观看演示：http://jsfiddle.net/audetwebdesign/3eLpU/

在 .my-second-widget .item 上设置color: inherit，这将强制嵌套.item继承.my-second-widget的颜色值（如果已设置），或.project的颜色值（如果已设置）或最终继承正文（设置或默认值）。

如果存在顶级.item规则，它将在 .my-second-widget 外部应用。