Question

我正在使用django，我的<p>选择器正在运行，但<h1>不是。

我无法理解为什么有些css正在工作而其他人没有。

bootstrap的工作顺序是什么？

它确实找到了style.css文件

元素的文本

    style.css

font-family: 'Wendy One', sans-serif;
font-family: 'Baloo', cursive;
font-family: 'Libre Baskerville', serif;


h1 {
    color:yellow;
    font-family: "Baloo", cursive;
}

p  {
    color: red;
    font-family: 'Libre Baskerville',sans-serif;
}

的index.html

{% extends "base.html" %}


{% block content %}
<h1 class="text-center" >The Wish Fairy Foundation</h1>
<p> this should be the index of wishfairies.</p>
{% endblock %}

base.html文件

{% load static %}

<!DOCTYPE html>

<html lang="en">




{% block title %}{% endblock %}




<head>
<link href="https://fonts.googleapis.com/css?family=Baloo|Libre+Baskerville|Wendy+One" rel="stylesheet">

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

<link rel="stylesheet" href="{% static 'css/style.css' %}">

</head>



{% block header %}


{% endblock %}

<body>

{% block sidebar %}



{% endblock %}


<div class="container">

{% block content %} 

{% endblock %}
</div>

{% block footer %}



{% endblock %}

</div>
</div>
</div>
</body>
</html>

Answer 1

您的style.css文件无效。 font-family行并未包含在任何选择器中，因此他们会违反下一条规则（h1）

将font-family行换行。我假设你想把它们包裹在单个元素中，这样它们就不会相互覆盖。

＆＃13;

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

<style>
.wendy {
  font-family: 'Wendy One', sans-serif;
}

.baloo {
  font-family: 'Baloo', cursive;
}

.libre {
  font-family: 'Libre Baskerville', serif;
}

h1 {
    color:yellow;
    font-family: "Baloo", cursive;
}

p  {
    color: red;
    font-family: 'Libre Baskerville',sans-serif;
}
</style>

<link href="https://fonts.googleapis.com/css?family=Baloo|Libre+Baskerville|Wendy+One" rel="stylesheet">

<h1>h1</h1>
<p>paragraph</p>

＆＃13;

<h1>样式不起作用但其他人将

1 个答案: