Question

我必须只为一个div包含一个css文件，并为第二个div包含另一个css文件。我们应该怎么做？我已经为此尝试过切换案例，但是当它为一个案例加载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;  
?>

任何帮助：）

Answer 1

每当您向页面添加css文件时，它都适用于整个文档。但是看看你的代码，我认为你要做的是在一个条件下显示1个html，在另一个条件下显示另一个chunk。为此，请将代码更改为：

<?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 -->

说说你实际上每个元素使用一个样式表的内容。可以使用网络组件，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
}

Answer 2

不，你不能只将StyleSheet用于一个div

创建一个新div并使用特殊的CSS作为该div。

如何只为一个div包含样式表文件？

2 个答案: