为什么下面的CSS不起作用？

我必须承认，我希望这能奏效。在我看来，我的CSS类是在选择“包含

class=“jumbotron features”的元素的所有子
h2
元素”

jsFiddle：

CSS

.jumbotron-features h2
{
    color: #797979;
    font-style: oblique;
}

HTML

<div class="jumbotron jumbtron-features">
        <div class="container">
            <div class="content">
                <div class="row">
                    <div class="col-lg-4 text-left">
                        <div class="feature-box feature-box-vertical-middle">
                            <h2>Seriously powerful, incredibly intuitive, and designed by real estate experts!</h2>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

非常强大，非常直观，由房地产专家设计！

您的div类被称为

jumbotron功能

，而不是

jumbotron功能

您的div类被称为

jumbotron功能

，而不是

jumbotron功能
HTML类：
jumbotron功能

CSS中的类：
jumbotron功能

“o”差异。
HTML中的类：
jumbtron功能

CSS中的类：
jumbotron功能

“o”的区别。
你会疯掉的。你的
div
类是
jumbOtron功能
，你的CSS类是
jumbOtron功能
。注意，“o”。
你会疯掉的。你的
div
类是
jumbOtron功能
，你的CSS类是
jumbOtron功能
。注意，“o”
 您的代码有错误

CSS具有
jumbotron功能
HTML具有
jumbtron特性

这项工作：
您的代码有错误

CSS具有
jumbotron功能
HTML具有
jumbtron特性

这项工作：
您的类名应该是这样的：


非常强大，非常直观，由房地产专家设计！

您的类名应如下所示：


非常强大，非常直观，由房地产专家设计！

输入错误，类名拼写错误

替换这个

.jumbotron功能h2

与

工作作风：

<style>
.jumbtron-features h2{
    color: #797979;
    font-style: oblique;
}
</style>


.jumbtron特性h2{
颜色：#7979；
字体风格：斜体；
}

HTML:


非常强大，非常直观，由房地产专家设计！

输出：

打字错误，类名拼写错误

替换这个

.jumbotron功能h2

与

工作作风：

<style>
.jumbtron-features h2{
    color: #797979;
    font-style: oblique;
}
</style>


.jumbtron特性h2{
颜色：#7979；
字体风格：斜体；
}

HTML:


非常强大，非常直观，由房地产专家设计！

输出：

HTML应该是这样的：

 <div class="jumbotron jumbotron-features">
            <div class="container">
                <div class="content">
                    <div class="row">
                        <div class="col-lg-4 text-left">
                            <div class="feature-box feature-box-vertical-middle">
                                <h2>Seriously powerful, incredibly intuitive, and designed by real estate experts!</h2>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


非常强大，非常直观，由房地产专家设计！

这是因为您在HTML中拼错了类名。HTML应该是这样的：

 <div class="jumbotron jumbotron-features">
            <div class="container">
                <div class="content">
                    <div class="row">
                        <div class="col-lg-4 text-left">
                            <div class="feature-box feature-box-vertical-middle">
                                <h2>Seriously powerful, incredibly intuitive, and designed by real estate experts!</h2>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


非常强大，非常直观，由房地产专家设计！

原因是您在HTML中拼错了类名
jumbotron功能
vs
jumbotron功能
jumbotron功能
vs
jumbotron功能
 <div class="jumbotron jumbotron-features">
            <div class="container">
                <div class="content">
                    <div class="row">
                        <div class="col-lg-4 text-left">
                            <div class="feature-box feature-box-vertical-middle">
                                <h2>Seriously powerful, incredibly intuitive, and designed by real estate experts!</h2>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>