有谁看到造型中需要修复的东西？

Question

所以我为我正在开发的WordPress主题创建了一个评论部分，经过半个小时的尝试弄清楚样式标签出了什么问题，我很难过所以问题就是文章.post img造型正在影响评论元img。一个人不应该影响另一个。

我还在Chrome开发者工具Elements中提供了它的样子：

<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">

这是style.css：

body {
        padding-top: 20px;
        font-size: 15px;
        color: #7a7a7a;
        line-height: 1.7em;
}
a {
        color: #0faf97;
}
.btn-primary {
        background: #0faf97;
        color: #fff;
        border-color: #fff;
}
.btn-primary:hover {
        background: #fff;
        color: #0faf97;
}
.container {
        max-width: 1020px;
}
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
        background: #0faf97;
}
.jumbotron {
        text-align: center;
        border-bottom: 1px solid #e5e5e5;
        padding-top: 90px;
        padding-bottom: 90px;
        color: #fff;
}
footer {
        padding-top: 19px;
        color: #777;
        border-top: 1px solid #e5e5e5;
}
.block {
        border:#ccc solid 1px;
        padding: 20px 20px 30px 20px;
        text-align: center;
}
.block h2 {
        color: #0faf97;
}
.fa {
   color: #0faf97;
}
.fa-3 {
        font-size: 4em !important;
}
.marketing {
        margin: 40px 0;
}
.content-region-1 {
        background: #0faf97;
        color: #ffffff;
        text-align: center;
}
.content-region-2 {
        background: #f4f4f4;
        color: #333333;
}
.content-region-3 {
        background: #000000;
        color: #ffffff;
}
.content-region-2 img {
        width: 100%;
}
.content-region-3 h4 {

}
.content-region-1 h1, .content-region-2 h3 {
        margin: 0;
        padding: 0;
        padding-bottom: 15px;
        font-size: 40px;
}
.content-region-3 form input[type="text"], .content-region-3 form textarea {
        width: 100%;
        padding: 5px;
        background: #333;
        color: #fff;
        margin-bottom: 10px;
        border: 0;
}
.pt20{padding-top: 20px;}
.pb20{padding-bottom: 20px;}
.pt30{padding-top: 30px;}
.pb30{padding-bottom: 30px;}
.pt40{padding-top: 40px;}
.pb40{padding-bottom: 40px;}
.pt50{padding-top: 50px;}
.pb50{padding-bottom: 50px;}
.pt60{padding-top: 60px;}
.pb60{padding-bottom: 60px;}
.side-widget {
    margin-bottom: 40px;
}
.side-widget h3 {
        border-left: 5px #0faf97 solid;
        padding-left: 10px;
        margin-bottom: 15px;
}
.title-bar {
        background: #0faf97;
        color: #ffffff;
        padding-bottom: 10px;
        border-bottom: 6px #ddd solid;
        margin-bottom: 20px;
}
article.post {
        border-bottom: 1px #ccc solid;
        overflow: auto;
        padding-bottom: 30px;
        margin-bottom: 40px;
}
article.post .meta {
        border-top: #ccc solid 1px;
        border-bottom: #ccc solid 1px;
        overflow: auto;
        list-style: none;
        margin: 0;
        padding: 5px 0;
}
article.post .meta li {
        float: left;
        margin-right: 20px;
}
article.post img {
        width:100%;
        height: auto;
        margin-bottom:20px;
}
.panel-heading {
   background: #0faf97 !important;
   color: #fff !important
}
.sidebar-widget ul {
  padding: 0 !important;
  list-style: none;
}
.sidebar-widget li {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #fff;
  border: 1px solid #ddd;
}
.comments {
  border: 1px #ccc solid;
  padding: 10px;
  margin-bottom: 20px;
  margin-top: 10px;
}
.comments h2, .comments h3 {
  background: #0faf97;
  color: #fff;
  padding: 5px;
}
.comment-body {
   border: #ccc 1px solid;
   margin-bottom:10px;

    .comment-meta {
  background: #333;
  color: #fff;
  padding: 10px;
  overflow: auto;
}
.comment-meta img {
  float: left;
  margin-right: 10px;
}
.comment-meta time {
  margin-left: 12px;
}
.comment-reply-link {
  background: #0faf97;
  color: #fff;
  display: inline-block;
  padding: 10px 15px;
}
.comment-form input, .comment-form textarea {
  width: 100%;
  padding: 3px;
  border: #ccc 1px solid;
  margin-bottom: 20px;
}

这是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>

当我改变文章时，它会影响头像图像。我无法弄清楚如何改变这种行为。头像图像太大了，我只是想缩小尺寸。

这是single.php文件：

<?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时，它会更改评论部分中的头像img，但它也会改变博客图像。不确定最终会发生什么。从理论上讲，如果我做得正确的话，评论元img应该是改变头像的形象。 Chrome开发者工具将其输出为CSS：

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;
}

Answer 1

article.post img选择器定位article.post元素内的所有图像。这包括您的头像图片。

如果您不想定位头像，请使您的选择器更具体。试试这个：

article.post .post_thumbnail img {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
}

现在，只有article.post和.post_thumbnail后代的图片才能获得样式。

revised fiddle