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

标签 javascript php jquery html css

我必须仅包含一个 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;  
?>

任何帮助:)

最佳答案

每当您将 css 文件添加到页面时,它都会应用于整个文档。然而,看看你的代码,我认为你想要做的是在一种条件下显示 1 block html,在单独的条件下显示另一 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/

相关文章:

javascript - 滚动到通过 jquery 切换打开的 div 的底部

javascript - flex 元素是否有可能与它们上方的元素紧密对齐?

php - mysql+php 中匹配相似列表

javascript - 没有 jQuery UI(或根本没有 jQuery?)的可排序/可拖动列表项

jquery - jQuery 使用什么来缩小其 css 和 javascript?

javascript - 我需要根据小计计算总计,

javascript - 如何用javascript欺骗拖动同一类的所有元素?

php - 'Zend_Exception' -> 'Registry is already initialized'

php - 回显名称而不是数据库中的值

jquery - 水平布局表上的分页符