我有一个投资组合列表页面，可以循环浏览这样的帖子：
<div class="row">
<!-- Loop though projects -->
<?php
$args = array('post_type' => 'project');
$the_query = new WP_Query( $args );
?>
<?php
if (have_posts()) : while ($the_query->have_posts()) : $the_query->the_post(); ?>
<a href="<?php the_permalink(); ?>">
<div class="col-sm-6 project-entry">
<!--Add thumbnails to potfolio items and resize for responsive-->
<?php
$thumbnail_id = get_post_thumbnail_id();
$thumbnail_url = wp_get_attachment_image_src( $thumbnail_id, 'thumbnail-size', true);
?>
<!--Link images and titles to individual portfolio page -->
<p>
<img src="<?php echo $thumbnail_url[0]; ?>" alt="<?php the_title();?> project image">
</p>
<div class="project-text">
<h4>
<?php the_title(); ?> | <?php the_field('project_type_name_'); ?>
</h4>
<p><?php the_field('brief_description_'); ?></p>
</div>
</div>
</a>
我需要为每个第一、第二和第三帖子设置样式。我认为最好的方法是为每个投资组合项添加一个类。
所以添加需要添加：
class-one到第一个、第四个等等。
class-two到第二个，第五个等等。
class-three到第三、第六等。
这是最好的方法吗，我该怎么做？
谢谢。
编辑：让我解释一下。我有一个投资组合列表页面，链接到单个帖子页面。
每个列表都是一个图像（项目条目），当您滚动图像时，文本（项目文本）显示在背景图像的顶部（在原始图像的顶部）。我希望每个第 1、4、7 个项目的悬停图像都相同，每个第 2、5 和 8 个项目都有一个不同的悬停图像，每个第 3、第 6 和第 9 个项目的另一个不同的悬停图像
，等等。这是正在使用的 CSS，（所以我正在尝试更改这部分：
background: url('img/project-dark-grey.png');
.project-entry img {
width: 100%;
margin: 30px 0;
position: relative;
}
.project-text {
position: absolute;
z-index: 1;
top: 7%;
color: #fff;
margin-right: 13px;
padding: 24% 0;
background: url('img/project-dark-grey.png');
height: 381px;
visibility: hidden;
}
.project-entry:hover .project-text {
visibility: visible;
}
我需要为每个第一、第二和第三帖子设置样式。
您可以使用nth-child
ul li:nth-child(3n+1) {
color: green;
}
ul li:nth-child(3n+2) {
color: blue;
}
ul li:nth-child(3n+0) {
color: red;
}<ul>
<li>Item
</li>
<li>Item
</li>
<li>Item
</li>
<li>Item
</li>
<li>Item
</li>
<li>Item
</li>
<li>Item
</li>
<li>Item
</li>
<li>Item
</li>
<li>Item
</li>
<li>Item
</li>
</ul>只需使用第 n 个子选择器。
p:nth-child(3n) {
background: #ff0000;
}
p:nth-child(3n+1) {
background: #ff0000;
}
p:nth-child(3n+2) {
background: #ff0000;
}
您也可以
使用nth-of-type
li:nth-of-type(3n+0){
/* CSS Here */
}
li:nth-of-type(3n+1){
/* CSS Here */
}
li:nth-of-type(3n+2){
/* CSS Here */
}
试试这个，把一个类名设置为索引 0 1 2 的类作为
$classes_arr = array('class-one','class-two','class-three');
递增计数器$counter并在循环内$arr_key
$counter = 0;
$arr_key = 0;
所以所有代码应该是
$classes_arr = array('class-one','class-two','class-three');
$counter = 0;
$arr_key = 0;
if (have_posts()) : while ($the_query->have_posts()) : $the_query->the_post();
$counter++;
echo '<div class="col-sm-6 project-entry '.$classes_arr[$arr_key].' ">';
$arr_key++;
if($counter%3 == 0){
$arr_key = 0
}
endwhile;
endif;
所以它是第n个孩子，但我需要使用.row。感谢所有回复的人，我真的很感激。
以下是最终有效的方法：
.project-text {
/* common styles for all */
background: url('path/to/bg1.png');
}
/* selects .project-text within links 2, 5, 8,... */
/* Switch to background-image here in case you need to add more background properties to the earlier rule */
/* If you use the shorthand again here to only change the background image then you will lose any other previously set properties */
.row a:nth-child(3n + 2) .project-text {
background-image: url('path/to/bg2.png');
}
/* selects .project-text within links 3, 6, 9,... */
.row a:nth-child(3n + 3) .project-text { /* same as 3n */
background-image: url('path/to/bg3.png');
}