如何将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

您好，我希望您一切顺利，目前您可以为一个元素应用样式表，但您只能将其应用于您在链接样式中引用的某些媒体查询

 <link rel="stylesheet" media="screen and min-width(750px)" href="{% static 'css2/bulma.min.css' %}">

要解决您的问题，请尝试更具体地通过 Id 在元素中进行选择，或者您可以通过添加 !important 来测试您的元素：

display: inline-block !important;//Make sure to test add !important after each value  if it works turn selecting By ID Or inline style ,styling from Html

Answer 2

您可以使用内联 CSS 来获取详细信息，

或者，您可以更改整个 CSS 并定位要更改的 div，使用 id 以获得更好的结果。

Answer 3

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