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

我不知道仅将样式表应用于某些元素的方法，因此您必须更改css文件本身以执行您想要的操作...以类为目标来更改要更改的div，或者在必要时提供它是一个ID，并在CSS中使用ID选择器。

Answer 2

您可以使用内联CSS以获得详细信息，您可以访问： How to add CSS

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

Answer 3

嗨，我希望您一切都好，目前您可以将样式表应用于一个元素，但可以将其应用于某些媒体查询，仅当您以链接样式引用时即可。

 <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

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

3 个答案: