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

2019年7月21日 179次阅读

为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中的项目将为红色(我希望它们从其父项继承颜色;而不是从不相关的常规项目中继承颜色) s班).

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

解决方案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;}

使用solution2,我仍然与一般的.item选择器发生冲突……

还有其他想法吗？

最佳答案 我认为以下内容可能适合您.

如果这是您的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,它将强制嵌套.item继承.my-second-widget(如果已设置)的颜色值,或.project的颜色值(如果是设置)或最终,正文(设置或默认值).

如果存在顶级.item规则,则它将应用于.my-second-widget之外.

点赞