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（但不在my-first-widget .item中），my-second-widget中的项目将为蓝色（我希望它们继承颜色）来自它的父母）。
我在项目中插入my-second-widget，其中规则定义为.item，my-second-widget中的项目将为红色（我希望它们从其父项继承颜色;而不是从无关的一般项目中继承颜色item's class）。

哪种样式可导出小部件的最佳解决方案？

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

   .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/

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

如果存在顶级.project规则，则会在.item之外应用。

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

1 个答案: