1

我正在寻找一种方法来设置没有 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;
}

我哪里错了？

4

6 回答 6

2

#在引用 ID 时使用。div 不是 ID 而是标签。

尝试

.gallery_detail_box div {
   font-weight: bold;
 }
于 2012-10-24T21:51:23.640 回答
1

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

于 2012-10-24T21:51:25.680 回答
1

要定位每个子 DIV 试试这个：

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

祝你好运。

于 2012-10-24T21:52:32.550 回答
1

根据您使用的浏览器，这可能会或可能不会起作用。它不适用于旧版本的 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)*/

等等

于 2012-10-24T21:57:59.877 回答
0

最简单的方法是使用第一个子伪选择器。

.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 的浏览器中可靠地工作。

于 2012-10-24T21:53:46.680 回答
0

给你的 div 上课。它的浏览器优化很差：

.class div{}

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

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

于 2012-10-24T22:01:54.667 回答