gpt4 book ai didi

javascript - 如何只包含一个 div 的样式表文件?

转载 作者:行者123 更新时间:2023-11-29 18:09:42 25 4
gpt4 key购买 nike

我必须只为一个 div 添加一个 css 文件,为第二个 div 添加另一个 css 文件。我们应该怎么做?我已经为此尝试过 Switch case,但是当它为一种情况加载 css 时,它仍然在其他情况下显示 css 效果。

这是我到目前为止尝试过的:

<?php
switch ($type_show1):
case 'welcome1':
//default:
?>
<link href="css/main.css" rel="stylesheet" type="text/css" /> // css to include
<div class="page-header">
<div class="page-title">
<h5>Booking Management</h5>
<span>Good morning, Admin!</span>
</div>
</div>
<!-- /page header -->

<?php
break;
endswitch;
?>

<?php
switch ($type_show2):
case 'welcome2':
//default:
?>
<!--<link href="css/main.css" rel="stylesheet" type="text/css" />--> // css not to include
<div class="page-header">
<div class="page-title">
<h5>Booking Management</h5>
<span>Good morning, Admin!</span>
</div>
</div>

<?php
break;
endswitch;
?>

任何帮助:)

最佳答案

无论何时向页面添加 css 文件,它都会应用于整个文档。但是看看你的代码,我认为你想要做的是在一种情况下显示 1 个 html block ,在单独的条件下显示另一个 block 。为此,请将您的代码更改为:

<?php
switch ($type_show1):
case 'welcome1':
//default:
?>
<link href="css/main.css" rel="stylesheet" type="text/css" />

<?php
break;
case 'welcome2' :
?>
<link href="css/main2.css" rel="stylesheet" type="text/css"/>

<?php
break;
?>

<div class="page-header">
<div class="page-title">
<h5>Booking Management</h5>
<span>Good morning, Admin!</span>
</div>
</div>
<!-- /page header -->

说到您实际所说的每个元素使用一个样式表。 可以使用 Web 组件,http://webcomponents.org/ , 和影子 DOM, http://webcomponents.org/articles/introduction-to-shadow-dom/ ,但我认为在您的情况下,最好简单地为每个 div 提供一个 id 或一个类,然后将 css 从一个 css 样式表专门应用于该 id 或类。

更新

要将 CSS 应用于两个不同的 div,请执行以下操作:

HTML

<html>
<head>
<link href="css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="page-header" id="div1">
<div class="page-title">
<h5>Booking Management</h5>
<span>Good morning, Admin!</span>
</div>
</div>
<div class="page-header" id="div2">
<div class="page-title">
<h5>Booking Management</h5>
<span>Good morning, Admin!</span>
</div>
</div>
</body>
</html>

CSS (main.css)

#div1 {
//Some CSS Styles to apply to the first div
}
#div2 {
//Some CSS Styles to apply to the second div
}

关于javascript - 如何只包含一个 div 的样式表文件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28651584/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com