Php 有人看到样式中有什么需要修改吗?

Php 有人看到样式中有什么需要修改吗?,php,html,css,wordpress,Php,Html,Css,Wordpress,因此,我为我正在开发的WordPress主题创建了一个评论部分,在花了半个小时的时间试图找出样式标签中的错误之后,我被难住了,所以问题是文章。post img样式正在影响评论元img。一方不应该影响另一方 我还提供了Chrome开发者工具元素中的外观: <img alt="" src="http://1.gravatar.com/avatar/4f9ce072cb3fdb377cbb1a083d5c7d1a?s=80&amp;d=mm&amp;r=g" srcset="ht

因此,我为我正在开发的WordPress主题创建了一个评论部分,在花了半个小时的时间试图找出样式标签中的错误之后,我被难住了,所以问题是文章。post img样式正在影响评论元img。一方不应该影响另一方

我还提供了Chrome开发者工具元素中的外观:

<img alt="" src="http://1.gravatar.com/avatar/4f9ce072cb3fdb377cbb1a083d5c7d1a?s=80&amp;d=mm&amp;r=g" srcset="http://1.gravatar.com/avatar/4f9ce072cb3fdb377cbb1a083d5c7d1a?s=160&amp;d=mm&amp;r=g 2x" class="avatar avatar-80 photo" height="80" width="80">
这是comments.php文件:

<div class="comments">
  <h2>Comments</h2>
   <?php $args = array(
        'walker'                => null,
        'max_depth'             => '',
        'style'                 => 'ul',
        'callback'              => null,
        'end-callback'          => null,
        'type'                  => 'all',
        'reply_text'            => 'Reply',
        'page'                  => '',
        'per_page'              => '',
        'avatar_size'           => 80,
        'reverse_top_level'     => null,
        'reverse_children'      => '',
        'format'                => 'html5', // or 'xhtml' if no 'HTML5' theme support
        'short_ping'            => false, // @since 3.6
        'echo'                  => true // boolean, default is true
     );
   ?>

   <?php wp_list_comments($args, $comments); ?>

   <?php
        $form_args = array(
                'label_submit'          => 'Send',
                'title_reply'           => 'Write a Reply or Comment',
                'comment_notes_after'   => '',
                'comment_field'         => '<p class="comment-form-comment"><label for="comment">'._x('Comment','noun').'</label><br /><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea></p>',
        );

        comment_form($form_args);
   ?>
</div>
<?php get_header(); ?>
  <?php if(have_posts()) : ?>
    <?php while(have_posts()) : the_post(); ?>
      <article class="post">
  <section class="row title-bar">
    <div class="container">
      <div class="col-md-12">
        <h1><?php the_title(); ?></h1>
      </div>
    </div>
  </section>

  <section class="row main">
    <div class="container">
      <?php if(is_active_sidebar('sidebar')) : ?>
        <div class="col-md-8">
      <?php else : ?>
        <div class="col-md-12">
      <?php endif; ?>
            <article class="post">
                <div class="post_thumbnail">
                  <?php if(has_post_thumbnail()): ?>
                    <?php the_post_thumbnail(); ?>
                  <?php endif; ?>
                </div>
                <ul class="meta">
                  <li>By <a href="<?php echo get_author_posts_url(get_the_author_meta('ID')); ?>"><?php the_author(); ?></a></li>
                  <li><?php the_time('F j, Y g:i a'); ?></li>
                  <li>
                    <?php
                        $categories = get_the_category();
                        $separator  = ", ";
                        $output     = '';

                        if($categories){
                          foreach($categories as $category){
                             $output .= '<a href="'.get_category_link($category->term_id).'">'.$category->cat_name .'</a>'.$separator;
                             //$output .= $category->cat_name . $separator;
                          }
                        }
                        echo trim($output, $separator);
                    ?>
                  </li>
                </ul>
                <br>
                <?php the_content(); ?>
            </article>
            <div class="clr"></div>
          <?php endwhile; ?>
        <?php endif; ?>
        <?php comments_template(); ?>
        </div>
        <?php if(is_active_sidebar('sidebar')) : ?>
          <div class="col-md-4">
           <?php dynamic_sidebar('sidebar'); ?>
          </div>
        <?php endif; ?>

    </div>
  </section>

      <?php if(is_active_sidebar('content-region-1')) : ?>
        <?php dynamic_sidebar('content-region-1'); ?>
      <?php endif; ?>

      <?php if(is_active_sidebar('content-region-2')) : ?>
        <?php dynamic_sidebar('content-region-2'); ?>
      <?php endif; ?>

     <?php get_footer(); ?>

article.post img
选择器以
article.post
元素内的所有图像为目标。这包括你的化身图像

如果你不想以化身为目标,那么让你的选择器更具体。请尝试以下方法:

article.post .post_thumbnail img {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
}
现在,只有
article.post
.post\u缩略图
的后代图像才会获得样式


你能提供一个演示吗?要注意的是,你错过了
}
上的一个结束符。注释正文
@Banzay,这是我在这里粘贴的一个错误,但在原始文件中,结束符在那里。谢谢你的关注。迈克尔,你提供演示是什么意思?我已经添加了single.php,看看这是否能帮助你们。也许你们可以发布输出的代码,这样我们就可以看到CSS是如何应用于HTML的。@Michael_B,输出的代码发布。这解决了问题Michael,谢谢你们坚持我。Michael,不管最后的评论,我删除了它,你的解决方案就是它。非常感谢。现在一切都好了。
element.style {
}
article.post img {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
}
.comment-meta img {
    float: left;
    margin-right: 10px;
}
img {
    vertical-align: middle;
}
img {
    border: 0;
}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
img[Attributes Style] {
    height: 80px;
    width: 80px;
}
Inherited from footer.comment-meta
.comment-meta {
    background: #333;
    color: #fff;
    padding: 10px;
    overflow: auto;
}
footer {
    padding-top: 19px;
    color: #777;
    border-top: 1px solid #e5e5e5;

user agent stylesheet
li {
    display: list-item;
    text-align: -webkit-match-parent;
}
Inherited from body.post-template-default.single.single-post.postid-20.single-format-standard.logged-in.admin-bar.wp-custom-logo.customize-support
body {
    padding-top: 20px;
    font-size: 15px;
    color: #7a7a7a;
    line-height: 1.7em;
}
body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #333;
    background-color: #fff;
}
Inherited from html
html {
    font-size: 10px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
html {
    font-family: sans-serif;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}
Pseudo ::before element
*:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
Pseudo ::after element
*:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
article.post .post_thumbnail img {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
}