CSS:应用于类组合的样式?

标签 css css-selectors

我不确定这是否可行,但是当您想根据应用到的类的组合来设置元素样式时,是否可以在 CSS 中使用语法?

我知道我可以用 jQuery 或其他东西检查一个元素并根据它拥有的类更改它的样式,但是有没有一种纯 CSS 方法可以做到这一点?

例如,如果我有一个粗体和绿色类:

.bold_green { color:green; font-weight:bold; }

还有一个粗体和蓝色类:

.bold_blue { color:blue; font-weight:bold. }

现在,假设我正在使用 jQuery 动态添加和删除类,并希望任何同时具有这两个类的元素都变成斜体粉红色。

类似于:

.bold_green AND .bold_blue { color:pink; font-style:italic; }

或者,如果我想设置一个具有类的元素的样式,并且该元素是具有另一个类的另一个元素的后代?

类似于:

.bold_green HAS_CHILD .bold_blue { color:black; background-color:yellow; }

谢谢!

编辑

谢谢大家的回答。这些几乎就是我的想法(只是将类视为常规选择器),但它们似乎对我不起作用。我将不得不检查我的代码并确保它们不会以某种方式被覆盖...

最佳答案

$('.bold_green.bold_blue').addClass('something-else');

或者在 CSS 中:

.bold_green.bold_blue { color: pink; }

注意选择器之间没有空格。

关于CSS:应用于类组合的样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2451399/

相关文章:

html - div 属性的行为

html - 作为延迟加载占位符的内联/编码 SVG

css - Bootstrap-4 与 Laravel : missing bootstrap classes

html - 两列布局,不同高度的图像

css - 是否有相当于 jQuery 的 :first selector in CSS3?

html - 需要一些关于 HTML 的解释,nth-child

JavaScript 选择器 : find nodes which contains descendants with specific attribute

jquery - css 查找第一个 child 给出了错误的结果

html - 直到 div 末尾的底部边框线,即使文本没有继续

css - 按值属性定位列表项