对特定的html块使用第二个style.css文件



我正试图为html中的特定块添加一个不同的style.css文件,所以基本上在同一html中使用两个style.css,而这个特定块只会从将要分配给的style.css中获得其规则?

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Askbootstrap">
<meta name="author" content="Askbootstrap">
<link rel="icon" type="image/png" href=" {% static 'img/fav.png' %} ">
<title>Swiggiweb - Online Food Ordering Website Template</title>
<!-- Slick Slider -->
<link rel="stylesheet" type="text/css" href=" {% static 'vendor/slick/slick.min.css' %} " />
<link rel="stylesheet" type="text/css" href=" {% static 'vendor/slick/slick-theme.min.css' %} " />
<!-- Feather Icon-->
<link href=" {% static 'vendor/icons/feather.css' %} " rel="stylesheet" type="text/css">
<!-- Bootstrap core CSS -->
<link href=" {% static 'vendor/bootstrap/css/bootstrap.min.css' %} " rel="stylesheet">
<!-- Custom styles for this template -->
<link href=" {% static 'css/style.css' %} " rel="stylesheet">
<!-- Sidebar CSS -->
<link href=" {% static 'vendor/sidebar/demo.css' %} " rel="stylesheet">
<!-- Stylesheet -->
<link rel="stylesheet" href=" {% static 'assets/css/animate.min.css' %} ">
<link rel="stylesheet" href=" {% static 'assets/css/magnific.min.css' %} ">
<link rel="stylesheet" href=" {% static 'assets/css/jquery-ui.min.css' %} ">
<link rel="stylesheet" href=" {% static 'assets/css/nice-select.min.css' %} ">
<link rel="stylesheet" href=" {% static 'assets/css/owl.min.css' %} ">
<link rel="stylesheet" href=" {% static 'assets/css/slick-slide.min.css' %} ">
<link rel="stylesheet" href=" {% static 'assets/css/fontawesome.min.css' %} ">
<link rel="stylesheet" href=" {% static 'assets/css/remixicon/remixicon.css' %} ">
<link rel="stylesheet" href=" {% static 'assets/css/responsive.css' %} ">
<!--Google Fonts-->
<link href="https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500;600;700;800&family=Bebas+Neue&family=Satisfy&family=Quattrocento:wght@400;700&display=swap" rel="stylesheet">
</head>

这是头,正如你所看到的,那里已经有一个样式css文件,这是需要一个不同样式.css文件的html块

<section class="product-area pd-bottom-90">
<div class="container"> ............


</section>

当我试图添加这一行来引用另一个样式.css 时

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

分页符和布局更改

您不能为html文档的特定部分导入css文件。如果您希望css只影响";产品区域";类,您必须从更改css选择器

#x {
...
}

.product-area #x {
...
}

您必须为每个css规则执行此操作。

样式按照它们在HTML文档中链接的顺序应用。因此,在上面的代码中,首先应用'css/style.css'中的所有规则,然后应用'assets/css/style.css'中的规则。这可能会导致类似的规则覆盖以前链接的文件并更改布局。通过使用更具体的规则,尽可能多地优化单个样式表。通过在所选元素之前指示一个或多个元素,规则将变得更加具体并获得更高的优先级。此外,您还可以使用直接在各个元素上定义的内联样式覆盖所有规则。(除非迫不得已,否则不推荐使用。(

最新更新