如何只选择特定的选择器声明的 css

Posted 2023-02-24

【中文标题】如何只选择特定的选择器声明的 css

【英文标题】：How to pick only specific selector declaration's css

【发布时间】：2019-05-28 11:19:41

【问题描述】：

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

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



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

那么这是否可以只选择多次声明的所需选择器的 css？

【问题讨论】：

没有。您需要覆盖这些规则。可能类似于.your-component .model background-color: transparent;

【参考方案1】：

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

zain_model 应该永远足够独特。或者你喜欢的前缀。

【讨论】：

问题是我不知道我的客户会安装哪个模板

如果你写了一个足够独特的类名并为它写了css样式，那没关系。

嗯，但是标准的引导类呢？

您只想设置与您的组件关联的元素的样式。您可以完全控制您编写的脚本中的类声明。如果您希望引导程序的默认行为适用于某些元素，请将原始类属性保留在原处。如果您需要其他样式，请在类声明中添加一个附加值（zain_ 前缀）。如果您不想要特定样式，请删除原始类。如果您想否定或覆盖某个样式，请进行特定声明以抵消特定样式。

【参考方案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

【讨论】：

嗯，感谢您的努力，但这不是解决方案。我的 Joomla 组件有独立的 CSS，它完全独立运行，但是当我使用任何模板时，它会继承模板的 css，这会产生问题，并且每个模板都有不同的 css（如果我切换到不同的模板）。所以我不能每次都手动更改组件的css

【参考方案3】：

用 css 覆盖

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