如何将CSS文件仅应用于特定的div

Question

我陷入了一个非常大的问题，我在互联网的帮助下创建了一个幻灯片放映，它工作正常，但当我使用该文件时它使用外部 CSS 文件，所以它扰乱了我想要应用此 CSS 文件的所有元素仅针对特定 div。

这是我的 HTML：

<div id="foo">

<div style="overflow-x: scroll;" class="columns">

{% for story in stories %}

  <div style="padding-right: 9px;">

    <a name="{{ story.id }}" class="showModal">

    <figure class="image is-128x128">

      <img class="is-rounded" src="{{ story.user.profile.profile_pic.url }}">

    </figure>

    <div class="media-content has-text-centered">

      <p class="title is-6">{{ story.user.username }}</p> 

    </div>

    </a>

  </div>

{% endfor %}

  </div>

<div class="modal">

  <div class="modal-background"></div>

  <div class="modal-card">

    <header class="modal-card-head">

      <p id="storiestitle" class="modal-card-title"> </p>

      <button id="closeModal" class="delete" aria-label="close"></button>

    </header>

        <!-- Slideshow container -->

    <section class="modal-card-body">

    <div class="slideshow-container">

      <!-- Full-width images with number and caption text

      <div class="mySlides fade">

        <div class="numbertext">1 / 3</div>

        <img src="{% static 'img/background1.jpg' %}" style="width:100%">

        <div class="text">Caption Text</div>

      </div> -->

      <div id="jsondata"></div>

      <!-- Next and previous buttons -->

        <a class="prev" onclick="plusSlides(-1)">&#10094;</a>

        <a class="next" onclick="plusSlides(1)">&#10095;</a>

    </div>

    </section>

    </div>

  </div>

  <button class="modal-close is-large" aria-label="close"></button>

</div>

</div>

<be>

我的CSS文件链接：

<link rel="stylesheet" href="{% static 'css2/bulma.min.css' %}">

我想将此 CSS 文件仅应用于特定的 div，而不干扰其他 div。

Answer 1

您好，我希望您一切顺利，目前您可以为一个元素应用样式表，但您只能将其应用于您在链接样式中引用的某些媒体查询&nbsp;<link&nbsp;rel="stylesheet"&nbsp;media="screen&nbsp;and&nbsp;min-width(750px)"&nbsp;href="{%&nbsp;static&nbsp;'css2/bulma.min.css'&nbsp;%}">要解决您的问题，请尝试更具体地通过 Id 在元素中进行选择，或者您可以通过添加 !important 来测试您的元素：display:&nbsp;inline-block&nbsp;!important;//Make&nbsp;sure&nbsp;to&nbsp;test&nbsp;add&nbsp;!important&nbsp;after&nbsp;each&nbsp;value&nbsp;&nbsp;if&nbsp;it&nbsp;works&nbsp;turn&nbsp;selecting&nbsp;By&nbsp;ID&nbsp;Or&nbsp;inline&nbsp;style&nbsp;,styling&nbsp;from&nbsp;Html

Answer 2

您可以使用内联 CSS 来获取详细信息，或者，您可以更改整个 CSS 并定位要更改的 div，使用 id 以获得更好的结果。

Answer 3

我不知道如何将样式表仅应用于某些元素，因此您必须更改 css 文件本身来执行您想要的操作...定位要按类更改的 div，或者如果需要，给它一个 id并在 css 中使用 id 选择器。