以循环中的某个帖子为目标(CSS)

我正在制作一个页面中的顶级照片部分。本节将有3篇最后的帖子（帖子中有图库），每个帖子都有缩略图、链接和摘录。立柱将以“方框样式”显示并水平对齐。这些箱子的容器宽1050px。

这是我的循环：

<div id="top-content">
<?php $custom_query = new WP_Query(\'cat=2687&posts_per_page=3\'); //Top of the page - Top Photo Category 
while($custom_query->have_posts()) : $custom_query->the_post(); ?>
<ul>
    <li <?php post_class(); ?> id="post-<?php the_ID(); ?>">
        <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(\'top-photo-thumb\'); ?><h2><?php the_title(); ?></h2></a>
        <p> <?php llc_excerpt(\'llc_excerptlength_long\', \'llc_excerptmore\') ?></p>
        <p class="view-more"><a href="<?php the_permalink(); ?>">View Gallery</a></p>
    </li>
</ul>
<?php endwhile; ?>
<?php wp_reset_postdata(); // reset the query ?>
</div>

这是我的CSS文件：

#top-content{
    margin-left: -10px;
}

#top-content ul{
    margin: 0 4px;
    float: left;
}

#top-content ul li{
    width: 320px;
    height: 100%;
    margin: 0 5px 0 5px;
    padding: 0 14px 0 0;
    /*display: block;*/
    border-right: 1px solid #D6D5D5;
}

#top-content h2 {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12pt;
    font-style: normal;
    line-height: 12pt;
    font-weight: bold;
    font-variant: normal;
    text-transform: none;
    color: #4A65A8;
    padding: 0px;
    margin: 7px 0 0 0;
    text-align: left;
}

#top-content ul li p{
    width: 320px;
    margin: 5px 0 0 0;
    text-align: justify;
}

#top-content ul:last-child{
    margin-left: 5px;
    background-color: yellow;
    border-style: 0px;
}

#top-content ul:last-child a img{
    margin-left:23px;   
}

#top-content ul:last-child h2{
    margin-left:23px;   
}

#top-content ul:last-child p{
    margin-left:23px;   
}

（对不起，代码太乱了。我一直在试验：P）

我想在这些“框”（帖子）之间画一条CSS分隔线。第一个和第三个（最后一个）箱子应分别放置在集装箱左右边缘的右侧without 左右边界，所以我认为实现这一目标的方法是second post and then add left and right border 进入其中。

我是如何做到的，或者你有其他建议吗？（我认为可以在循环中添加自定义类）。正如你所看到的，我一直在尝试使用最后一个孩子（带有nth和那个“n”的东西）选择器，但仍然没有运气。。我不太擅长CSS（和PHP）TBH。。

提前感谢！

$counter = 0; $custom_query = new WP_Query(\'cat=2687&posts_per_page=3\'); //Top of the page - Top Photo Category while($custom_query->have_posts()) : $custom_query->the_post(); $counter++; $column = $counter %3; // 3 columns, use module to get the remainder $class = "column-".$column; ?> <ul> <li <?php post_class($class); ?> id="post-<?php the_ID(); ?>">

#top-content .column-2{ margin-left: 5px; background-color: yellow; border-style: 0px; } #top-content .column-2 a img{ margin-left:23px; } #top-content .column-2 h2{ margin-left:23px; } #top-content .column-2 p{ margin-left:23px; }

可以直接从模板文件中将原始的css字符串入队吗？

我想知道是否可以将原始CSS作为字符串直接从模板文件中排队？我正在为页面编写自定义模板，需要为其添加一些样式规则。我想做的是在PHP中将样式写成字符串变量，然后使用enqueue\\u style函数加载这些样式，而不是将它们添加到“style”中。css”或其他一些外部样式表。我假设，只要我在调用“get\\u header”函数之前将样式排队，并且如果我连接到“wp\\u head”或“wp\\u enqueue\\u styles”操作，这将起作用，但它似乎不起作用，而且我不确定“wp\\u enq

相关推荐

可以直接从模板文件中将原始的css字符串入队吗？