css将id和类结合起来

我希望我的h1标题与我为其编写的css相对应，但我看不到将id和类选择器结合在一起可以在css中获得正确的语法。项目的css。h1似乎否决了标题h1

由于id是唯一的，您可以使用此css选择器：

.project {
    width: 30%;
    margin: 18px;
    position: relative;
    display: inline-block;
    background-color: pink;
}

.project h1{
    text-align: center;
    font-family: "Futura";
    font-size: 50px;
}

.project h1 a {
    color: #000;
    text-decoration: none;
}

.project h1 a:hover {
    color: #000;
    border-bottom: 2px solid #000;
}

.project h2{
    text-align: center;
    font-family: "Futura";
    font-size: 15px;
}

.project#caption h1{
    text-align: center;
    font-family: "Futura";
    font-size: 10px;
}

要组合一个类和一个id，id应该在类前面（但在这种情况下不需要，请使用上面的代码）：

---

您没有具有该id的

.project

对象（这是CSS指定的）

应该是

.project#caption h1 {

尽管这不会很好地工作，因为有多个

h1

元素具有相同的

id

<代码>id在文档中必须是唯一的；您可能需要一个

标题

类，您可以将其命名为

.project h1#caption {

---

尝试将标题的css更改为：

.project .caption

---

使用“ID”css选择器将确保它始终胜过css“类”选择器。此外，如果您愿意，还可以去掉此类中的文本对齐和字体系列，因为它已经应用于

.project h1

css声明中。

在您的示例中，您只需要ID。ID在整个页面中应该是唯一的。在您的示例中，仅使用

#caption

就足够了

我可以看到一个使用类的用例。假设您有条件地添加/删除一个类，并希望该类的存在具有某种UI效果

所以，你是这样做的：

h1#caption {
    text-align: center;
    font-family: "Futura";
    font-size: 10px;
}

这意味着将示例位更改为：

#caption.project {

}

---

您也可以使用

h1#caption.project

向其添加标记，但我看不出这有什么意义，除非CSS非常混乱，您必须覆盖其他样式或其他东西而不更改它。无论如何，这也是一个非常混乱的情况。

id不会是唯一的；PHP循环中正在输出一系列

project

div。所有人都将拥有相同的

标题

id，以及多个

标记

id等。然后你应该将其更改为一个类：）如果我是OP，我想我会的。我在回答中也提出了同样的建议。

.project .caption

h1#caption {
    text-align: center;
    font-family: "Futura";
    font-size: 10px;
}

#caption.project {

}

#caption.project {
    text-align: center;
    font-family: "Futura";
    font-size: 10px;
}