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

Question

Hi I'm stuck in a very big problem I have created a slide show from the help of internet It is working perfectly but it uses an external CSS file when I use that file so It disturbs my all elements I want to apply this CSS file to a particular div only.

Here is my 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>

My css file link:

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

I want to apply this CSS file to a particular div only without disturbing other div(s).

Answer 1

我不知道有一种方法可以将样式表仅应用于某些元素，因此您必须更改 css 文件本身才能执行您想要的操作……以您想要按类更改的 div 为目标，或者在必要时给它一个 id并在 css 中使用 id 选择器。

Answer 2

You can use inline CSS for that for detailed information you can visit : How to add CSS

Or, you can change the whole CSS and target the div you want to change, use id to get better result.

Answer 3

Hi Man i hope you are well, currently you can apply stylesheet for one element but you can apply it for certain media query only that you refere in the link style

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

to solve your problem try to be more specific to select in your element by Ids or you can test your element by adding !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