Question

我在html中有这样的课程：

<div class="balloon b1" style="background-image: url(balloon1.png);"></div>

正如你可以看到类名是分开的，它是为了javascript的目的而定位不同的对象，但是让我说我不想通过html添加样式，所以我在html中留下了<div class="balloon b1"></div>并通过css进行了定位：

.balloon b1 {
}

当然它不是这样的目标。任何想法如何针对这种东西？

Answer 1

<div class="balloon b1"></div>：类名未分开。这个div有两个类（.balloon和.b1）

我建议在CSS中定义两个类：

.balloon {

}

.b1 {

}

.b1中的任何内容都将覆盖.balloon中定义的任何内容。它很容易扩展，并且可以被应用程序中的其他节点使用。

Answer 2

尝试：

.balloon.b1 {
}

这将匹配所有带有两个类的元素。

Answer 3

在CSS中，.用于表示类，#用于表示id。同样，您可以将课程结合起来，这就是您要查找的内容：

.balloon.b1 
{ 
    //CSS GOES HERE 
}

但是，如果您要将其推断为多个不同的项目，最好将气球类别与个别气球类别分开，例如：

//Balloon
.balloon{ width: 100px; height: 100px;}

//Individual Styles
.b1 { background-color: red;  }
.b2 { background-color: blue; }
.b3 { background-color: yellow; }
.b4 { background-color: green; }

<强> Working Demo

Answer 4

如果你的HTML元素有两个类，比如<div class="foo bar">，你可以用两个CSS类选择器来组合它：

div.foo.bar { /* rules */ }

或者，如果您想省略标签选择器：

.foo.bar  { /* rules */ }

Answer 5

你必须在每个班级名称前加上一个dit：

.balloon.b1 {
}

如何通过css定位分离的类名？

5 个答案: