Question

我基本上是一个PHP开发人员，但是遇到一个问题，在Joomla组件开发中，我必须在成功完成的任何Joomla网站中独立安装自己的组件。问题是，当我在随机的Joomla网站上运行组件时，它还会选择我不希望其执行的父模板的CSS。例如，我在组件中有一个类为model的引导程序模型，并且模板在同一类background-color: white上应用了一些CSS（例如model），然后在其上显示白色背景该模型确实很尴尬，没有任何意义。

.model{ // I want this to be picked 
 font-size: 15px;
}


.model{ // I don't want this to be picked 
 background-color: white;
}

那么这有可能只选择多次声明的所需选择器的css吗？

Answer 1

如果您已经开发了自己的Joomla组件，并且您的类名与其他类发生冲突，那么最简单/最明智的做法就是声明避免冲突的唯一类名。

zain_model应该永远足够独特。或根据需要添加前缀。

Answer 2

在HTML中，在其父元素内声明的任何元素都将继承父类的所有css属性。因此，如果您想删除该子元素中的白色背景，则可以

a）为子元素声明另一个css类，该子元素将子元素的背景设置为其他内容（在这种情况下，请创建一个“ .submodel”类，将背景设置为透明或其他颜色，并包括字体大小到你想要的 b）声明一个ID“ #submodel”并执行a）中所述的声明 c）如果此子级是通用的p（段落）或h（标题）元素，则可以将该节的类指定为：

.model p {
     -set background to new colour
     -set font size
 }

在CSS中，元素样式始终是从父元素继承的，因此在设计样式甜菜时，应牢记类的具体程度，因为从长远来看，它将降低灵活性，就像要注意的一面

有关CSS继承的更多信息，请参见：https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance

Answer 3

使用CSS覆盖

.model{
  font-size: 15px;
  background-color: transparent !important;
}

如何仅选择特定选择器声明的CSS

3 个答案: