Javascript 如何从rmarkdown页面HTML文档中的特定页面中排除HTML DIV？_Javascript_Html_Css_R Markdown_Pagedown

Javascript 如何从rmarkdown页面HTML文档中的特定页面中排除HTML DIV？

javascript html css

Javascript 如何从rmarkdown页面HTML文档中的特定页面中排除HTML DIV？,javascript,html,css,r-markdown,pagedown,Javascript,Html,Css,R Markdown,Pagedown,我在Rmarkdown上使用了一个分页的HTML文档模板，我想删除我用自定义CSS和HTML创建的页眉和页脚。我尝试过使用：not（），但无法在CSS中指定选择器，因为我不确定要使用哪个选择器（更新：我想出了一个混乱的解决办法，我可以使用，在页眉和页脚的CSS中，我调整了页眉的“top”属性和页脚的“bottom”属性。）然而，如果有一个不太迂回的方式来实现这一点，下面是我所尝试的，请帮助建议一个更干净的建议我已经为页眉和页脚定义了一个单独的div，每个div中有各自的元素，如下所示：

我在Rmarkdown上使用了一个分页的HTML文档模板，我想删除我用自定义CSS和HTML创建的页眉和页脚。我尝试过使用

：not（）

，但无法在CSS中指定选择器，因为我不确定要使用哪个选择器

（更新：我想出了一个混乱的解决办法，我可以使用，在页眉和页脚的CSS中，我调整了页眉的“top”属性和页脚的“bottom”属性。）

然而，如果有一个不太迂回的方式来实现这一点，下面是我所尝试的，请帮助建议一个更干净的建议

我已经为页眉和页脚定义了一个单独的div，每个div中有各自的元素，如下所示：

---
title: "Title Here"
author: 
date: 
output:
  pagedown::html_paged:
    toc: true
    self_contained: false
    css:
      - default-fonts
      - default
      - custom-page-portrait.css
      - Pagesplit.css
knit: pagedown::chrome_print

---
<div class="divFooter">
   <div class="divFooter--line"> <body><hr></body> </div>
   <div class="divFooter--ReportDate"style = "font-family:calibri;"> **Report Date:**<br>10/12/112</div>
   <div class="divFooter--ReportAnalyst" style = "font-family:calibri;"> **Report Analyst**<br>John Smith</div>
   <div class="divFooter--HoldingsDate" style = "font-family:calibri;"> **Holdings Date**<br>December 31, 2018</div>

</div>


<div class="divHeader">
  <div class="divHeader--left" style = "font-family:calibri;"> **Header Left**<br>under half</div>
  <div class="divHeader--right" style = "font-family:calibri;"> **Header Right**<br>under half</div>

</div>

页脚css是类似的

页面的原始自定义css为：

@page {
  size: 8.3in 11.7in;
}

/* store some string variables */
.shorttitle1 {
  string-set: h1-text content(text);
}

.shorttitle2 {
  string-set: h2-text content(text);
}

/* left page */
.running-h1-title {
  position: running(runningH1Title);
  width: var(--running-title-width);
  text-overflow: ellipsis;
  overflow: hidden;
}
.running-h1-title:before {
  content: string(h1-text);
}

@page :first{
    content: "Some text";
    position: relative;
    
  }
@page :first {
  @top-left {
     content: none;
  }
  @top-right {
    content: none;
  }
  @bottom-right {
    content: none !important;
  }
  background-image: var(--front-cover);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
@page {
  @bottom-left{
    <div class="footerObj"> 
      <hr>
      <p>A Name.</p>
    </div>;
  }
}
.footerObj {
  top: 10px;
  text-indent: 100px;
}
@page :left {
  @bottom-right {
    content: counter(page);
  }
}

@page :right {
  @bottom-right {
    content: counter(page);
  }
}

/* Front cover */
.front-cover {
  break-after: page;
}

/* page breaks; aka CSS fragmentation */
.level1 {
  break-before: page;
}
.section > h1, .section > h2, .section > h3, .section > h4, .section > h5, .section > h6 {
  break-after: avoid;
}
.footnotes {
  break-before: always;
  break-after: always;
}
.figure {
  break-inside: avoid;
}

/* do not break captions */
caption {
  break-inside: avoid;
  break-after: avoid;
}

@page{
尺寸：8.3英寸11.7英寸；
}
/*存储一些字符串变量*/
.短标题1{
字符串集：h1文本内容（文本）；
}
.短标题2{
字符串集：h2文本内容（文本）；
}
/*左页*/
.running-h1-title{
职位：running（runningH1Title）；
宽度：var（--运行标题宽度）；
文本溢出：省略号；
溢出：隐藏；
}
.running-h1-title:之前{
内容：字符串（h1文本）；
}
@页码：第一页{
内容：“一些文本”；
位置：相对位置；
}
@页码：第一页{
@左上角{
内容：无；
}
@右上角{
内容：无；
}
@右下角{
内容：无！重要；
}
背景图像：var（--前盖）；
背景位置：中心；
背景尺寸：包含；
背景重复：无重复；
}
@页面{
@左下角{

一个名字
;
}
}
.footerObj{
顶部：10px；
文本缩进：100px；
}
@页码：左{
@右下角{
内容：柜台（第页）；
}
}
@页码：对{
@右下角{
内容：柜台（第页）；
}
}
/*封面*/
.封面{
断开后：页面；
}
/*分页符；又名CSS碎片*/
.1级{
前断：页面；
}
.截面>h1、.截面>h2、.截面>h3、.截面>h4、.截面>h5、.截面>h6{
打破后：避免；
}
.脚注{
打破之前：永远；
打破后：永远；
}
.图{
破门而入：避免；
}
/*不要破坏标题*/
标题{
破门而入：避免；
打破后：避免；
}

/*Header*/
@media screen {
  div.divHeader {
    display: none;
  }
}
@media print {
  div.divHeader { 
    position: fixed;
    top: 0;
    left: 0;
  }
}
/*https://www.w3schools.com/howto/howto_css_style_header.asp*/
/* http://getbem.com/introduction/ */
.divHeader {
  position: relative;
  padding: 10px;
  text-align: center;
  background: #F15A55;/*not real colour*/
  color: white;
  font-size: 25px;
  width: 100%;
  height:8%;
  float: none;
}

.divHeader--left {
  position: absolute;
  text-align: left;
  float: left;
  left: 50px;
  top: 10px;
}

.divHeader--right {
  position: absolute;
  text-align: right;
  float: right;
  right: 50px;
  top: 10px;
}

@page {
  size: 8.3in 11.7in;
}

/* store some string variables */
.shorttitle1 {
  string-set: h1-text content(text);
}

.shorttitle2 {
  string-set: h2-text content(text);
}

/* left page */
.running-h1-title {
  position: running(runningH1Title);
  width: var(--running-title-width);
  text-overflow: ellipsis;
  overflow: hidden;
}
.running-h1-title:before {
  content: string(h1-text);
}

@page :first{
    content: "Some text";
    position: relative;
    
  }
@page :first {
  @top-left {
     content: none;
  }
  @top-right {
    content: none;
  }
  @bottom-right {
    content: none !important;
  }
  background-image: var(--front-cover);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
@page {
  @bottom-left{
    <div class="footerObj"> 
      <hr>
      <p>A Name.</p>
    </div>;
  }
}
.footerObj {
  top: 10px;
  text-indent: 100px;
}
@page :left {
  @bottom-right {
    content: counter(page);
  }
}

@page :right {
  @bottom-right {
    content: counter(page);
  }
}

/* Front cover */
.front-cover {
  break-after: page;
}

/* page breaks; aka CSS fragmentation */
.level1 {
  break-before: page;
}
.section > h1, .section > h2, .section > h3, .section > h4, .section > h5, .section > h6 {
  break-after: avoid;
}
.footnotes {
  break-before: always;
  break-after: always;
}
.figure {
  break-inside: avoid;
}

/* do not break captions */
caption {
  break-inside: avoid;
  break-after: avoid;
}