隐藏除单个嵌套 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 之外的所有网页项 的相关文章

  • 在书签中使用本地存储

    我非常喜欢使用带有小脚本的书签 例如 我编辑了注释编辑脚本这个帖子 http www reddit com r LifeProTips comments 265rxe lpt use a browser tab as a quick and
  • jQuery 悬停滑动?

    检查底部是否有修订版 好吧 问题就到这里了 我有一个li with a div在里面 我试图将鼠标悬停在li得到div向上滑动到视图中 这是 HTML li div h4 title h4 p description p div li 现在
  • IE10重画/重画问题

    你可以在这里看到这个工作 中断 http new campchampions com parents http new campchampions com parents 该问题仅在 IE10 中出现 用户滚动一小段距离后 导航就会被固定
  • 样式媒体接收器源 (Chromecast)

    目前 我正在开发我的应用程序的 chromecast 集成 目前 您的投射接收器应用程序有 3 个选项 风格媒体接收器 默认媒体接收器 定制媒体接收器 我真的很喜欢媒体接收器的样式 因为以这种方式设计接收器的样式非常容易 然而 有时我真的很
  • Firefox 和 IE 在 元素上添加了内边距/边距。和clearfix的奇怪之处

    在很长一段时间里 我在 Firefox 和 IE 中遇到了一些垂直间距问题 我正在使用一个 我的 css 中的选择器将边距应用于某个容器元素内的所有内容 在 Chrome 中工作正常 但是在 FF 和 IE 中 我似乎不知从何而来得到了神秘
  • HTML 带点尾的大文本

    如果文本大小大于应用点指示的更多文本 我想在固定大小的 div 内显示文本 example 如果 div 内可以显示的文本数量是 10 那么 文本 澳大利亚 应显示为 澳大利亚 文本 United States Of America 应显示
  • 使用 javascript/jQuery 更改类的背景颜色属性

    这似乎是一个简单的问题 但没有任何解决办法 我正在尝试使用 javascript jQuery 动态更改某些文本的背景颜色 从白色或粉色到绿色 但由于某种原因它不起作用 文本使用名为 novice 的 CSS 类进行样式设置 这是CSS 这
  • 发布后忽略基本标签

    在 Chrome 上我收到错误Refused to execute a JavaScript script Source code of script found within request 在发布包含域名的数据后 另请注意任一页面上都缺
  • IE 中重叠元素的垂直对齐

    我正在构建的表单可以在 Chrome 和 FF 中完美呈现 但在 IE 中完全未对齐 它应该是什么样子 Image HTML div class portlet content div class logoInfo h3 strong La
  • 如何为 Safari 浏览器设置媒体查询

    media only screen and min width 480px and max width 767px 这是我的媒体查询如何修复它 如何设置 safari 网络浏览器 媒体查询不是为了浏览器检测而进行的 使用 javascrip
  • 带有占位符文本的文本框,该文本会逐字符消失

    我正在寻找一种方法来构造带有日期字段占位符文本的文本框 占位符文本将为 xx xx xxxx 并在用户键入时逐个字符消失 留下斜杠 我遇到了以下两个问题 它们似乎解决了使文本立即消失的问题 HTML CSS 制作一个文本框 其中的文本显示为
  • 将画布输出图像调整为特定尺寸(宽度/高度)

    我有一个大画布 5000x5000 我想拍一张照片并在客户端创建一个缩略图 我可以使用捕获图像canvas toDataURL但我该如何调整它的大小 我必须创建一个新的吗
  • Javascript - 如何从 location.href 中删除域

    我需要使用 Javascript 从 location href 中删除域名 我有类似的链接 http localhost App User UserOrder aspx id 949abc91 a644 4a02 aebf 96da3ac
  • 缩放 MapBox GL 地图以适合标记集

    假设我有以下 Mapbox 地图代码 mapboxgl accessToken
  • 将字体导入 React 应用程序

    我正在尝试在我的应用程序中使用 Roboto 字体 但遇到了困难 I did npm install save typeface roboto并添加了import typeface roboto 到我的 React 组件 但仍然无法改变我的
  • 如何在点击事件上调用 Angular 组件 [Angular]

    我不是 Angular 方面的专家 我也遵循了互联网上的一些答案 特别this https stackoverflow com questions 17636528 how do i load an html page in a div u
  • 如何在iframe中隐藏滚动条,但仍然能够滚动

    我的一个页面上有一个 iframe 其中有另一个页面 我想隐藏滚动条 但我找不到任何解决方案 我尝试过overflow hidden 但它不起作用 见下面的代码 CSS代码 iframe overflow hidden 由于您没有指定是否需
  • 给出 HTML 和 Xpath 时突出显示

    给定 HTML 作为字符串 Xpath 和偏移量 我需要强调这个词 在下面的例子中我需要强调Child 1 HTML 文本 h2 Children h2 Joe has three kids br ul li a href Child 1
  • 在 Bootstrap 导航栏后添加一些空间的最佳方法是什么?

    以下代码始终在页面顶部显示导航栏 我需要将第二个容器 内容 放置在导航栏的末尾而不是其下方 目前第二个容器位于导航栏下方 我可以在内容顶部添加一些空白 但我不确定这是一个好方法 知道如何解决吗 div class container div
  • 将 CSS 类应用于 asp:Hyperlink 中的图像?

    我使用 asp Hyperlink 根据 URL 中的参数动态呈现链接图像 我需要能够将 CSS 类添加到渲染的 img 中 但不知道如何做到这一点 我知道我可以将 CssClass blah 添加到asp Hyperlink 但在渲染的H

随机推荐