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