代码之家 › 专栏 › 技术社区 › Eli

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

css-selectors css

32

Eli · 技术社区 · 16 年前

我不确定这是否可行,但是当您想基于应用于它的类的组合来设置元素的样式时,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; }

编辑

谢谢你的回答。这些和我想的差不多(只是把类当作常规的选择器),但它们似乎对我不起作用。我将不得不检查我的代码,并确保他们没有被重写。。。

4 回复 | 直到 16 年前

1

80

Paul Alexander 16 年前

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

或在CSS中:

.bold_green.bold_blue { color: pink; }

2

6

Esteban Küber 16 年前

你不需要什么特别的,只要

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

3

4

Community Mohan Dere 9 年前

对于“有孩子”的情况,您将使用:

.bold_green .bold_blue { ... } /* note the ' ' (called the descendant selector) */

bold_blue 内部元素 bold_green 元素。

或者如果你想要一个直接的孩子:

.bold_green > .bold_blue { ... } /* this child selector does not work in IE6 */

哪种款式只适合具有直接父级的元素 粗绿色

4

1

Mehdi 10 年前

在visual studio 2013中,CSS设置通过“逗号”应用于多个类,如下所示:

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