Question

div id="projectpage">
        <?
        foreach($projects as $project) {

            ?>
            <div class="project">
                <h2><?=$project->date;?></h2>

                <h1><a href="project.php?id=<?=$project->id;?>"><?=$project->title;?></a></h1>
                    <div class="primary-image">
                        <a href="project.php?id=<?=$project->id;?>"><img src="media/<?=$project->primary_image->filename;?>"></a>
                    </div>

                <div id="tag">
                    <h2 id="tag"><?=$project->tag1;?></h2>
                </div>


                <h1 id="caption"><?=$project->caption;?></h1>



            </div>
            <?
        }

        ?>
    </div>

这是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;
}

我希望我的h1标题与我为其编写的css相对应，但是我无法通过id和类选择器的组合在CSS中获得正确的语法。项目的CSS。 h1似乎否决了标题h1。

Answer 1

你没有.project具有该id的对象（这是你指定的CSS）。

.project#caption h1 {

应该是

.project h1#caption {

虽然这样做不会很好，但由于您有多个h1个元素具有相同的id。 id必须在文件中是唯一的;你可能想要一个caption课程，你可以将其作为

.project .caption

Answer 2

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

h1#caption{
    /* your css */
}

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

#caption.project h1{
    /* your css */
}

Answer 3

尝试将标题的css更改为：

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

使用“ID”css选择器将确保它始终胜过css“class”选择器。此外，如果您愿意，您还可以删除此类中的text-align和font-family，因为它已经在.project h1 css声明中应用。

Answer 4

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

我可以看到使用它的用例。如果你说有条件地添加/删除一个类，并希望类的存在具有一些UI效果。

所以，你就是这样做的：

#caption.project {

}

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

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

您也可以使用h1#caption.project为其添加标记，但我没有看到这一点，除非CSS非常混乱，您必须覆盖其他样式或其他内容而不更改它。无论如何，这又是一个非常混乱的情况。

css结合了id和class

4 个答案: