隐藏除单个嵌套 div 之外的所有网页项

2024-03-02

假设我的网页有这样的结构:

<body>
    <div id="fee">
        <div id="fi">

            <div id="actual_content">

                <p>Content</p>
                <div id="some_important_stuff">Blah</div>
                <p>More content</p>
                <span class="and_another_thing">Meh</span>

                ...
            </div>

            <div id="fo>
                ...
            </div>

            ...
        </div>

        <div id="fum">
            ...
        </div>

        ...
    </div>

    <div id="fazz">
        ...
    </div>

    ...
</body>

我想创建一个打印 CSS 样式,隐藏除以下内容之外的所有内容实际内容.

我的第一次尝试是这样的:

body * {
    display: none; /* Hide everything first */
}

/* Show content div and all of its ancestors */

body > #fee {
    display: block;
}

body > #fee > #fi {
    display: block;
}

body > #fee > #fi > #actual_content {
    display: block;
}

/* Unhide contents of #actual_content */

#actual_content * {
    display: block; /* Not ideal */
}

但是,由于没有“display:auto”或“display:default”,所以我弄乱了实际内容当我尝试取消隐藏它们时。我也不喜欢对路径进行硬编码实际内容因为它可能会改变。


您可能想使用能见度 http://www.w3schools.com/cssref/pr_class_visibility.asp财产。 W3学校描述 http://www.w3schools.com/css/css_display_visibility.asp显示属性和可见性属性之间的区别:可见性属性影响元素的可见性,但不影响其结构,即它通常在页面上占用的空间。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

隐藏除单个嵌套 div 之外的所有网页项 的相关文章

  • JavaScript 跨浏览器单击 HTML DOM 元素

    是否有可用的普通 JavaScript 跨浏览器函数能够触发 HTML DOM 元素 包括 div 等非表单元素 上的单击事件 大多数走这条路的人要么最终开发自己的事件管理系统 这并不难 但很烦人 要么在可用的功能范围内工作 如果所有浏览器
  • 使用jquery和css点击按钮后旋转div文本

    我想使用 jquery 和 css 单击按钮后旋转 div 文本 如果用户点击Rotate Left按钮 然后文本在左侧旋转 or用户点击Rotate Right按钮然后文本在右侧旋转 Example div Happy Birthday
  • 如何使用 jQuery 拖放文本

    我需要创建一个消息模板 如下所示 你好 Stackoverflow Text A 感谢您的支持 Text B 在这种情况下 我需要使用拖放字段来Textarea 我进行了初步研发 寻找一些库来实现我的要求 并发现了这个通过拖放插入文本 ht
  • 如何使用 jQuery 在弹出窗口中预览输入类型=“文件”中选定的图像? [复制]

    这个问题在这里已经有答案了 在我的代码中 我允许用户上传图像 现在我想在同一个弹出窗口中将所选图像显示为预览 我怎样才能使用 jQuery 做到这一点 以下是我在弹出窗口中使用的输入类型 HTML 代码
  • 响应式 CSS 图像锚点标签 - 图像地图样式

    我一直在开发一个响应式网站 并且在图像映射方面遇到了一些问题 图像映射似乎不适用于基于百分比的坐标 经过一番谷歌搜索后 我发现了一个 JS 解决方法 http mattstow com experiment responsive image
  • 使用 JSON 文件动态更新 HTML 内容?

    我想创建一个 JS 循环 使用 jQuery 来查看 JSON 文件 并根据是否 div ids 与 JSON id 值匹配 这需要易于扩展并且无论有多少人都可以工作 div 添加了盒子 我有一个 HTML 文件 设置如下 div clas
  • iFrame 未扩展至 100% 高度

    我有这个下面的html 我希望 iFrame 能够 100 覆盖屏幕的其余部分 我在高度属性中尝试了 100 和 但不起作用 这是为什么 谢谢 div img height 35 width 84 alt Kucku src Content
  • 输入和文本字段中的背景颜色

    我想更改表单文本和输入字段中的颜色背景 但是当我这样做时 它也会影响提交按钮 是否可以通过其他不影响按钮的方式来完成 我用过这段代码 input textarea background color d1d1d1 input type tex
  • 在打印 CSS 上在每个页面周围绘制边框?

    打印时我需要在每个页面周围绘制边框 我最初是使用带有分页符的 div 来完成此操作 例如 media print contentContainer position inline height 98 width 100 top 0px le
  • 显示带有背景颜色的百分比条

    例如 如果我有一个包含两列和 2 行的表 Col1 Percentage 50 50 70 70 如何用代表 COl1 值的颜色填充百分比列 像这样的东西 您可以使用具有两个紧接着的停止点的线性渐变 percentageFill heigh
  • 光滑的旋转木马不工作

    我一直在尝试简单地实现 Slick Carousel 的工作 我已按照 Git 页面上的说明进行操作 https github com kenwheeler slick https github com kenwheeler slick 这
  • 使组合高度等于浏览器窗口的高度

    http featuredfotografer com http featuredfotografer com Codemirror div 与 header div 结合占用的高度超过了浏览器的高度 我怎样才能使它们的总高度达到浏览器窗口
  • canvas.getContext('2D') 返回空值

    我创建了一个画布并将其命名为getContext 方法 但它返回null为上下文 这是我使用的代码 我在控制台中得到了这个
  • AngularJS 输入字段未从控制器内的 setTimeout 更新

    我正在使用 AngularJS 支持的页面 并且我需要在只读输入文本字段内显示正在运行的时钟 与data ng model 为了模拟运行的时钟 我使用了 JavaScript 调度程序setTimeout每 1000 毫秒调用一个函数 该函
  • 使用溢出时无法隐藏滚动条:auto

    我有这个CSS div background color red position relative height 414px overflow auto width 902px margin 0px auto 我尝试过overflow y
  • Symfony 2 使用 CSS 设置背景图片

    I want to put a background image for a menu in symfony But I can t figure out how to do it I managed to style a lot of t
  • 如何在 Bootstrap 列中使用文本溢出?

    假设我有一行具有固定高度 并且我在其列中插入了一些文本 如果太长 我希望将其剪掉 并在行尾添加三个点 如下所示 我在用着文本溢出 省略号 我的行中有此属性 但无法使其工作 JsFiddle http jsfiddle net Alexnot
  • iOS Safari Mobile 禁用上一个和下一个选择输入

    上周五我发现了关于此问题的类似问题 但似乎无法再次找到它 如果有人能指出我正确的方向 那就太好了 本质上我在一个页面上有多个选择菜单 第一个在加载时填充 第二个在第一个选择时填充 够简单的 但是 在 iOS 设备中 当您点击选择元素时 它会
  • 随机定位的 div,不重叠

    所有 div 都像我需要的那样 随机 放置 但它们偶尔会重叠 这只是一个机会问题 我怎样才能防止这种情况发生 理想情况下我能够设置它们之间的最小距离 我可以通过进一步开发当前的 javascript 来实现这一目标吗 我需要考虑完全不同的方
  • 使用 JQuery 预填充选择字段的下拉选项验证

    我有这个 JQuery 片段来防止选择已在另一个字段中选择的下拉选项 var coll select name service on change function coll each function var val this value

随机推荐