我的 css 样式表未在引导项目中应用 styles

Question

I am doing a project and have noticed that whenever I add new styles to my css file it doesn't apply any of them.我正在做一个项目，并注意到每当我将新的 styles 添加到我的 css 文件中时，它都不会应用它们中的任何一个。 It's very odd.这很奇怪。

This is my html section这是我的 html 部分

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Book Landing Page</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
  crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="../css/style.css">
  <link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
</head>

As you can see, my stylesheet is below the bootstrap link, so it should normally overwrite it from my understanding.如您所见，我的样式表位于引导链接下方，因此根据我的理解，它通常应该覆盖它。

Here is the CSS I have so far added to my stylesheet这是迄今为止我添加到样式表中的 CSS


@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');


* {
  box-sizing: border-box;
}


header, section {
  overflow-x: hidden;
}

:root {
  --Poppins:"Poppins", sans-serif;
  --light-black: #2e2c2c;
  --bggradient: linear-gradient
  (
    to bottom,
    #dd2476, #ff512f
  );
  --light-gray: rgba(255,255,255,0.7);
}

header {
  background-color: var(--bggradient);

This is my folder structure too这也是我的文件夹结构

And so far this is what my site looks like: The background colour should have changed in the header section到目前为止，这就是我的网站的样子： header 部分中的背景颜色应该已经改变

As well as having the fonts changing too.以及让 fonts 也发生变化。 Can anyone notice anything that I have missed?谁能注意到我错过的任何东西？ Just can't figure this out:(就是想不通：（

Thank you!谢谢！

Answer 1

you need to enter your css folder./css/style.css您需要输入您的 css 文件夹。/css/style.css

Answer 2

As you are using the same class name as it is in the bootstrap framework.当您使用与引导框架中相同的 class 名称时。 In order to make your style override, you need to add !important like this after styles为了使您的样式覆盖，您需要在 styles 之后添加!important important
like this.像这样。

header, section {
  overflow-x: hidden !important;
}

This will make it override the default bootstrap styles.这将使其覆盖默认引导程序 styles。

Note:Make sure you are referencing your css files correctly注意：确保您正确引用了 css 文件

我的 css 样式表未在引导项目中应用 styles

问题描述

2 个解决方案

解决方案1
0 2019-11-21 12:16:56

解决方案2
0 2019-11-22 07:14:05

我的 css 样式表未在引导项目中应用 styles

问题描述

2 个解决方案

解决方案1 0 2019-11-21 12:16:56

解决方案2 0 2019-11-22 07:14:05

解决方案1
0 2019-11-21 12:16:56

解决方案2
0 2019-11-22 07:14:05