Question

我想用CSS重新设置nav id="jive-breadcrumb"。我想在div class="jive-alert-type jive-alert-announcement"出现且div class="jive-alert-type jive-alert-announcement"不存在时有不同的风格。

我已经通过css部门获得了这个：

section#j-main  div#jive-body nav#jive-breadcrumb ul { }

我的第二个css选择器

section#j-main  :not(???) div#jive-body nav#jive-breadcrumb ul { }

如何将选择器编写为不同的？

这是css的部分

<section>
  <span>
     <script>...</script>
  </span>

  <div id="jive-alert-container">
    <!-- the presence or absence of this inner div is what makes
         the two html fragments different -->
    <div id="jive-alert-global" role="marquee" class="clearfix">
    </div>

  </div>

  <div id="jive-body" class="clearfix" role="main">
    <nav id="jive-breadcrumb" aria-label="Communities Breadcrumbs" role="navigation">
        <ul><li>Support Communities</li><li>The Lounge</li>
            <li>Full Host Bar</li>
        </ul>
    </nav>   
  </div>
</section>

以下是div class =“jive-alert-type jive-alert-announcement”不存在的情况。

<section>
  <span>
     <script>...</script>
  </span>

  <!-- The following div doesn't have any tags in it.  I need to detect this with a css selector to generate different css.  -->
  <div id="jive-alert-container">
  </div>

  <div id="jive-body" class="clearfix" role="main">
    <nav id="jive-breadcrumb">
        <ul><li>The Lounge</li>
            <li>Full Host Bar</li>
        </ul>
    </nav>

    ...
  </div>
...
</section>

Answer 1

css目前没有选择父元素。在MutationObserver附加或删除元素或DOM中的特定父元素时，您可以使用DOM执行任务。

＆＃13;

var jive = document.getElementById("jive-alert-container");
var breadcrumb = document.getElementById("jive-breadcrumb");
breadcrumb.classList.toggle("present");

var config = {childList: true};

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log(mutation);
    if (mutation.addedNodes.length 
       && mutation.addedNodes[0].id === "jive-alert-global") {
         breadcrumb.classList.toggle("present");
    }
    if (mutation.removedNodes.length 
      && mutation.removedNodes[0].id === "jive-alert-global") {       
        breadcrumb.classList.toggle("present");          
    }
  })
});

observer.observe(jive, config);

var clone = jive.querySelector("#jive-alert-global").cloneNode(true);

setTimeout(function() {
  jive.querySelector("#jive-alert-global").remove();
  setTimeout(function() {
    jive.appendChild(clone);
  }, 5000);
}, 5000)

＆＃13;

#jive-breadcrumb.present {
  color: green;
}

#jive-breadcrumb:not(.present) {
  color: blue;
}

＆＃13;

<section>
  <span>
     <script></script>
  </span>

  <div id="jive-alert-container">
    <!-- the presence or absence of this inner div is what makes
         the two html fragments different -->
    <div id="jive-alert-global" role="marquee" class="clearfix">
    jive alert global
    </div>

  </div>

  <div id="jive-body" class="clearfix" role="main">
    <nav id="jive-breadcrumb" aria-label="Communities Breadcrumbs" role="navigation">
      <ul>
        <li>Support Communities</li>
        <li>The Lounge</li>
        <li>Full Host Bar</li>
      </ul>
    </nav>
  </div>
</section>

＆＃13;

Answer 2

css选择器section#j-main表示存在具有给定ID的html元素：<section id="j-main">。

使用<section id="j-main">替换要修改的部分应该使该部分响应您在上面定义的css块。

另请注意，页面上每个元素只能有一个唯一ID，因此jive-body和jive-breadcrumb id应更改为类。

这应该产生：部分＃j-main div.jive-body nav.jive-breadcrumb ul {css customizations here} ...

      <div class="jive-body" class="clearfix" role="main">
        <nav class="jive-breadcrumb" aria-label="Communities Breadcrumbs"         role="navigation">
            <ul><li>Support Communities</li><li>The Lounge</li>
                <li>Full Host Bar</li>
            </ul>
        </nav>   
      </div>
    </section>
    ...


    <div class="jive-alert-type jive-alert-announcement" is not present.
    <!-- This section will not have the changes -->
    <section>

      <div class="jive-body" class="clearfix" role="main">
        <nav class="jive-breadcrumb">
            <ul><li>The Lounge</li>
                <li>Full Host Bar</li>
            </ul>
        </nav>

        ...
      </div>
    ...
    </section>

将html与css扇区区分开来

2 个答案: