Question

我正在寻找一种方法来设置没有ID或类关联的div。我不是在寻找评论，建议我将自己的ID或类应用到div中，因为我想要修改的代码是wordpress插件的一部分，更新时会重置我应用的任何样式。

我想要修改的代码是：

<div class="gallery_detail_box">
    <div><?php echo $post->post_title; ?></div>
    <div><?php echo the_excerpt_max_charlength(100); ?></div>
    <a href="<?php echo $permalink; echo basename( get_permalink( $post->ID ) ); ?>"><?php echo $gllr_options["read_more_link_text"]; ?></a>
</div>

我已经尝试将包含“post_title”的div作为目标，因为我希望将其设为大胆并尝试了几种不同的方法，但无济于事，我最后一次尝试定位该div是：

.gallery_detail_box > #div {
    font-weight:bold;
}

.gallery_detail_box #div #div {
    font-weight:normal;
}

我哪里错了？

Answer 1

引用ID时使用

#。 div不是ID而是标签。

尝试

.gallery_detail_box div {
   font-weight: bold;
 }

Answer 2

取出#标志。在定位类型选择器时，您只需使用不带任何前缀的选择器名称。

Answer 3

定位每个儿童DIV尝试：

div.gallery_detail_box div:nth-child(1) {....}
div.gallery_detail_box div:nth-child(2) {....}

祝你好运。

Answer 4

根据您使用的浏览器，这可能有效，也可能无效。它不适用于旧版本的IE（7,8）或任何其他不支持CSS 3的浏览器。

.gallery_detail_box {
    font-weight:normal;
}

.gallery_detail_box div:nth-child(1){
    font-weight:bold;
}

旧浏览器

.gallery_detail_box {
    font-weight:normal;
}

.gallery_detail_box div:first-child{
    font-weight:bold;
}

然后将自定义样式应用于旧版浏览器中的第二个，第三个等嵌套div：

.gallery_detail_box div:first-child + div{
    font-weight:bold;
}
/*(second)*/
.gallery_detail_box div:first-child + div + div{
    font-weight:bold;
}
/*(third)*/

等

Answer 5

最简单的方法是使用第一个子psuedoselector。

.gallery_detail_box div:first-child {
    font-weight: bold;
}

这对旧浏览器有影响。检查MDN兼容性图表，查看是否有任何目标浏览器受到影响：https://developer.mozilla.org/en-US/docs/CSS/:first-child

如果您需要将子元素定位到第一个元素之外，则可以使用:nth-child(2) psuedoselector。

另一个选择是使用JavaScript，它可以在任何支持JavaScript的浏览器中可靠地工作。

Answer 6

给你的div上课。它糟糕的浏览器优化：

.class div{}

因为浏览器在向元素添加css时通过dom进行反向搜索。

https://developers.google.com/speed/docs/best-practices/rendering

使用没有ID或类的css设置div的样式

6 个答案: