将CSS应用于PHP加载的HTML

Question

我为div类设置了一个样式，用于从这个文本文件加载的一些html。

content.txt

<div class="container">
    <main class="content">
        <strong>Paragraph Title</strong> <br>                                
Lots of text that actually goes here.
    </main><!-- .content -->
</div><!-- .container-->

事实上，<strong>代码之间的文字与该文字的其余部分看起来并不相同。

CSS

<style type="text/css">
#auto-slideshow {
  position:relative;
  z-index:1;
  overflow:hidden;
  margin:0 auto;
  height:300px;
  border:2px solid #333333;
  box-shadow:0 0 5px 0 #000;
  -webkit-box-shadow:0 0 5px 0 #666;
}

#auto-slideshow img {
  height: 100%;
  width: 25%;
  position:absolute;
  margin-left: 32.5%;
  z-index:1;
  opacity:0;
  -webkit-transition:opacity .8s linear;
}

#auto-slideshow img.show {
  opacity:1;
}

.content {
  border-right: solid 1px #999999;
}
</style>

HTML

<div class="middle">

    <?php 
      echo file_get_contents( "modules/content.txt" ); // get the contents, and echo it out.
    ?>                               

    <?php 
      echo file_get_contents( "modules/leftSidebar.txt" ); // get the contents, and echo it out.
    ?> 

    <?php 
      echo file_get_contents( "modules/rightSidebar.txt" ); // get the contents, and echo it out.
    ?>

  </div><!-- .middle-->

以下是我检查元素时出现的内容

更新

我将边框的大小增加到疯狂数量（100px）并发现文本环绕应该是边框，但它仍然没有显示边框。

Answer 1

检查样式表。在inspect元素面板中，它显示padding属性定义为两次不同，一行在113行，第二行在162。请记住，css使用最后一个定义，因此您应该：

1. 在第162行之后指定您的规则
2. 删除第162行中的规则
3. 使用第一个定义中的!important标记，以便使用该标记

其中任何一项都应该有效